字体图标盒子阴影

Posted 2021-01-09 layerluo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了字体图标盒子阴影相关的知识，希望对你有一定的参考价值。

字体图标

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

以上是关于字体图标盒子阴影的主要内容，如果未能解决你的问题，请参考以下文章

css有用的代码片段

Flutter Textfield 响应式字体

如何应用字体真棒图标颜色-包括白色阴影而不仅仅是轮廓[重复]

伪类边框，字体图标，显隐，overflow，阴影，二维变形

css3总结立方体动画web字体字体图标弹性布局多列布局伸缩盒子

在线使用iconfont字体图标

字体图标 盒子阴影

字体图标盒子阴影