字体图标 盒子阴影

字体图标

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>字体图标</title>
	<!-- 使用第三方库 -->
	<!-- <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
	<!-- <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"> -->
	<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
	<style type="text/css">
		.i1 {
			/*font-size: 30px;*/
			color: orange;
		}
	</style>
</head>
<body>
	<i class="i1 fa fa-spinner fa-4x fa-spin"></i>
</body>
</html>

 

盒子阴影

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>盒子阴影</title>
	<style type="text/css">
		.box {
			width: 200px;
			height: 200px;
			background-color: red;
			margin: 350px auto;
			/*盒子阴影*/
			/*x轴偏移 y轴偏移 虚化长度 阴影宽度 阴影颜色*/
			/*多个值之间用,隔开*/
			box-shadow: -310px 0 30px 0px yellow, 310px 0 30px -10px green, 0 -310px 30px -10px orange, 0 310px 30px -10px blue; 
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

 

posted @ 2018-09-28 22:56  大张哥  阅读(286)  评论(0)    收藏  举报