概述
- box-shadow 可以向盒子模型添加
一个或者多个阴影; - 如果设置多个阴影，中间需要用
逗号分隔开; - 多个阴影在 z 轴上的顺序规则为：阴影应用的顺序
为从前到后，第一个阴影在最上面； - 如果元素同时设置了
border-radius属性，那么阴影也会有圆角效果；
可设置属性
- X 轴偏移量(
offset-x)：设置x 方向的阴影偏移量； - Y 轴偏移量(
offset-y)：设置y 方向的阴影偏移量； - 模糊半径(
blur-radius，可选)：如果设置了模糊半径，会创建一个渐变区域，向周围的颜色过渡； - 扩散半径(
spread-radius，可选)：扩散半径是对原来的纯色阴影的缩放。取正值时，阴影扩大；取负值时，阴影收缩。默认为 0，此时阴影与元素同样大； - 颜色(
color，可选)：阴影颜色； - 内阴影(
inset，可选)：如果没有指定 inset，默认阴影在边框外，即阴影向外扩散，指定该字段，阴影向内扩散。
模糊半径详解
- 当没有设置 blur(
blur: 0px) 时，元素尺寸与阴影尺寸是一样的； - 将 blur 设置为 20px 或者 40px 的时候，阴影的尺寸明显得到扩展；
- 阴影的模糊区域是从，
没有设置 blur 时阴影的边缘，向两端扩展，在这个区域实现垂直或者水平类似于渐变的模糊效果；过渡颜色的范围在完整的阴影颜色到它最外面的终点的透明之间。
如上图所示，第二个阴影设置了 blur 的值为 20px，那么模糊区域就是以未设置 blur 时阴影的边缘为中线，分别向两边延伸 10px。
扩散半径详解
扩散半径 spread 参数直接扩展阴影的边缘。
- 扩散半径为 0 时，阴影与元素尺寸一样大
- 扩散半径为 10px 时，阴影向四周扩散各 10px
模糊半径与扩散半径混合使用
可以理解为:
- 先根据 x,y 轴偏移量
移动阴影位置; - 然后根据扩散半径（spread）
扩展阴影面积; - 然后模糊半径（blur）再以这个新边缘为标准
进行模糊效果。
