码迷,mamicode.com
首页 > 其他好文 > 详细

字体图标 盒子阴影

时间:2018-09-28 23:26:49      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:head   link   com   pcdn   --   orange   第三方   round   back   

字体图标

<!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>

 

字体图标 盒子阴影

标签:head   link   com   pcdn   --   orange   第三方   round   back   

原文地址:https://www.cnblogs.com/layerluo/p/9721400.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!