一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。
前言
一般情况下开发过程中遇到的阴影/发光最简单的处理方法是直接用切图来展示，但切图带来的问题就是如果修改就很麻烦，需要新的切图来替换。css3中的box-shadow就可以解决这个问题，和box-shadow相似的属性还有两个，分别是text-shadow和drop-shadow,他们三个分别用于盒子的阴影，文字的阴影，透明图像的非透明部分产生的阴影/发光。
box-shadow的属性
- offset-x:水平的偏移量，可以为正值或负值，，可以用任何单位的长度，正值代表向右，负值代表向左（必选，默认值0）
- offset-y:垂直的偏移量，可以为正值或负值，，可以用任何单位的长度，正值代表向下，负值代表向上（必选，默认值0）
- blur:模糊半径，代表阴影的清晰程度，可以用任何单位的长度，值越大阴影的边缘越模糊。
- spread:阴影的大小，也就是阴影实际的大小，可以用任何单位的长度，可以用负值，正值表示扩大，负值表示缩小。
- color：阴影的颜色
- position：阴影的位置，outset是外阴影，inset是内阴影
text-shadow、drop-shadow
text-shadow很drop-shadow的属性和上述box-shadow的属性差不多，唯一的区别是他们两个不包含sperad和position
书写形式
box-shadow:offset-x offset-y blur spread color position
text-shadow:offset-x offset-y blur color
drop-shadow(offset-x,offset-y,blur,color)
实际操作
当前四个值都是0 的时候 1.前四个值为0
.box {
border: 1px solid #ccc;
width: 200px;
height: 200px;
box-shadow: 0px 0 0px 0px red
}
这种情况阴影就是看不到的情况，在目标元素box下边，如图：
2.第一个值不为0
.box {
border: 1px solid #ccc;
width: 200px;
height: 200px;
box-shadow: 100px 0 0px 0px red
}
这时候是阴影往右的偏移，之所以设置了100是为了显眼，如图
3.第二个值不为0
.box {
border: 1px solid #ccc;
width: 200px;
height: 200px;
box-shadow: 0px 100px 0px 0px red
}
这时候阴影是向下的偏移，也设置为100，如图
4.设置第一个和第二值同时不为0
.box {
border: 1px solid #ccc;
width: 200px;
height: 200px;
box-shadow: 100px 100px 0px 0px red
}
如图：
5.设置blur为100，这时候你会看到印象变的模糊
.box {
border: 1px solid #ccc;
width: 200px;
height: 200px;
box-shadow: 100px 100px 100px 0px red
}
如图：（之所以这么模糊是设置了100，自己可以试试从100减小会发生什么）
6.设置spread为100，这时候阴影会比目标元素扩大100
.box {
border: 1px solid #ccc;
width: 200px;
height: 200px;
box-shadow: 0px 0px 0px 100px red
}
如图：
思考
在开发的使用过程中，阴影可以看做是一个和目标元素一样大小的处于目标元素下边的元素，这时offset-x和offset-y就是阴影元素相对目标元素的位置，blur就是模糊的半径，这个值越大阴影也会变大（注意不是实际的变大，但是值越大颜色就会越模糊）；spread可以理解为阴影元素的大小，默认是0（也就是和目标元素一样大，值变大阴影的实际大小就会变大），我之前每次用都看属性，老是不会用，光看上边的属性介绍感觉很难理解，还是要在代码里一点一点试一下，试完感觉豁然开朗。
注：除了上面说的使用方法外，可以在某一个方向上设置多个阴影效果，如果设置了border还能制造出类似彩虹的效果；还需注意的是先声明的阴影的权重最高，会挡住后边声明的阴影效果。
