携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情
写页面经常使用这个属性，但时常忘记相关属性值代表的含义，今天来学习总结下相关知识。
box-shadow 属性可以让元素的边框产生阴影效果。该属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色。
语法：
box-shadow: inset offset-x offset-y blur-radius spreadr-radius color;
offset-x： X 轴偏移量(必需，水平阴影的偏移量)
offset-y： Y 轴偏移量(必需，垂直阴影的偏移量)
blur-radius： 阴影的模糊半径
spreadr-radius： 阴影的扩散半径
color： 阴影的颜色
inset： 阴影在边框内部 (不设的话，默认阴影在边框外，即阴影向外扩散)
实例说明：
统一的一个元素样式
.box {
width: 200px;
height: 200px;
background-color: aqua;
border-radius: 10px;
}
1. offset-x 和 offset-y
a. 当offset-x /offset-y是正值时，阴影向x轴、y轴正方向偏移（即向右偏移5px，向下偏移5px）。如：box-shadow: 5px 5px #ccc;
b. 当offset-x /offset-y为负值时，阴影向x轴、y轴负方向偏移（即向左偏移5px，向上偏移5px）。如：box-shadow: -5px -5px #ccc;
c. 只要一边的阴影，只需设置一边的阴影偏移量，另一边设为 0 即可。如：
box-shadow: 0 5px #ccc;
2. blur-radius
该值越大，模糊面积越大，阴影就越大越淡。不能为负值，默认为 0，表示阴影不模糊。
如：box-shadow: 5px 5px 10px #ccc;（第一个），box-shadow: 5px 5px 50px #ccc;（第二个）
3. spreadr-radius
正值表示阴影扩大，负值表示阴影收缩。默认为 0，此时阴影与元素同样大
如：box-shadow: 0 0 0 5px #ccc（第一个），box-shadow: 5px 5px 10px -5px #ccc;（第二个），box-shadow: 5px 5px 10px -10px #ccc;（第三个）
注：
当只设置
spread-radius时，效果相当于border，但并不是真正的边框，元素的实际宽高并不会计算该值，实际上相当于一个实心的阴影（第一个）。当
spread-radius的负值和blur-radius的值相等时，阴影会消失（第三个）。
4. color
不设置就默认取浏览器的默认色，因为各浏览器的默认色不同，所以还是需要设置一下
5. inset
该值将阴影指定为内阴影。当offset-x /offset-y是正值时，阴影向x轴、y轴负方向偏移（即向左偏移5px，向上偏移5px），当为负值时，与正值效果相反。
如：box-shadow: inset 0 0 10px 5px #ccc;（第一个），box-shadow: inset 10px 10px 10px -5px #ccc;（第二个）
简单实现一个彩虹
.rainbow {
width: 300px;
height: 300px;
border-radius: 360px 0 0 0;
box-shadow: -2px -2px 0 1px #FF0000,
-4px -4px 0 3px #FF7F00,
-6px -6px 0 5px #FFFF00,
-8px -8px 0 7px #00FF00,
-10px -10px 0 9px #00FFFF,
-12px -12px 0 11px #0000FF,
-14px -14px 0 13px #FF00FF;
transform: rotate(45deg);
}
注：同一个元素添加多个阴影效果，使用逗号将每个阴影值隔开。阴影应用的顺序为从前到后，第一个阴影在最上面
