前言
css3中新增两种阴影，分别是box-shadow&text-shadow。从字面上意思即盒子阴影和文本阴影，本文主要内容简单的介绍一下阴影的使用。
一、box-shadow
W3school中的语法为：
box-shadow: h-shadow v-shadow blur spread color inset;
/*
h-shadow:水平阴影的位置，必选，允许为负
v-shadow:垂直阴影的位置，必选，允许为负
blur:模糊距离，可选
spread:阴影的尺寸，可选
color:阴影的颜色，可选，css颜色值
inset:阴影的颜色，将外部阴影 (outset) 改为内部阴影
*/
实例
<style>
.box{
width: 100px;
height: 100px;
background-color: green;
}
.shadow{
box-shadow: 10px 10px 5px 5px #000000;
}
</style>
<body>
<div class="box shadow"></div>
</body>
阴影可以理解为就是在原元素下面复制了一份，h-shadow与v-shadow控制阴影的位置，blur即边缘这种模糊化的距离，spread为相对于原元素尺寸的增加量，color为阴影的颜色，同时可以使用rgba(x,x,x,x)的方法设置颜色来添加透明度，四个参数前三个为rgb颜色值，第四个参数为0-1.0的数值代表透明度，inset、outset即阴影的内外部方向，默认为外部阴影
inset、outset酷炫特效
本案例引用自简书 https://www.jianshu.com/p/f791eb0afab9
<style>
*{
margin: 0px;
padding: 0px;
}
body{
background-color:#000;
}
div{
position: absolute;
width: 200px;
height: 200px;
/* border: 1px solid #ccc; */
top: calc(50% - 100px);
left: calc(50% - 100px);
border-radius:50%;
box-shadow:inset 0px 0px 50px #fff,
inset 10px 0px 80px #f0f,
inset -10px 0px 80px #0ff,
inset 10px 0px 180px #f0f,
inset -10px 0px 180px #0ff,
0px 0px 50px #fff,
10px 0px 50px #0ff,
-10px 0px 50px #f0f;
}
</style>
<body>
<div></div>
</body>
这个案例可以看出阴影可以添加多个，每个用“,”隔开，调整相应的属性可以做出类似霓虹灯的炫彩特效
二、text-shadow
W3school中的语法为：
text-shadow: h-shadow v-shadow blur color;
/*
h-shadow:水平阴影的位置，必选，允许为负
v-shadow:垂直阴影的位置，必选，允许为负
blur:模糊距离，可选
color:阴影的颜色，可选，css颜色值
*/
相对于box-shadow少了阴影的尺寸和内外部阴影的选择
实例
<style>
.box{
width: 100px;
height: 100px;
background-color: green;
color: red;
font-size: 18px;
font-weight: bold;
line-height: 100px;
text-align: center;
}
.shadow{
box-shadow: 10px 10px 5px 5px #000000;
text-shadow: 5px 5px 2px #000000;
}
</style>
<body>
<div class="box shadow">WDNMD</div>
</body>
各属性跟box-shadow一样，可以看出text-shadow不只针对于文本类型的标签，在div中的文字也实现了阴影。
图片背景颜色与文字颜色重叠添加阴影
经常会遇到图片背景上有文字时，文字的颜色与色彩较多的背景图片颜色重叠导致文字不清楚，此时添加一个淡淡的文字阴影效果就会非常清晰
text-shadow:2px 2px 5px #333333;
三、补充：drop-shadow
drop-shadow与box-shadow&text-shadow名字上看起来应该属一类，虽然功能很像但准确的来说drop-shadow应该叫投影而不是阴影。
他的语法与前两者相似：
filter: drop-shadow(h-shadow v-shadow blur color);
/* 各参数使用等同于text-shadow */
实例
想要对于png图片来添加阴影，如果对其添加box-shadow属性，会发现是对img标签的这个盒子添加阴影，添加text-shadow属性则无事发生
可以通过drop-shadow的方法来添加png图片的阴影
<style>
img{
width: 200px;
height: 200px;
}
.shadow{
/* box-shadow: 20px 20px 10px 0 #333333; */
/* text-shadow: 20px 20px 10px #333333; */
filter:drop-shadow(20px 20px 10px #333333);
}
</style>
<body>
<img class="shadow" src="i1.png">
</body>
注：非png图片因为默认空白区域是白色并非透明色，所以在使用drop-shadow时会出现像添加box-shadow一样的盒子阴影效果
