在我初学前端时，每次碰到有元素阴影时都要搜好久，下定决心，一定要搞懂每个属性的意义，自由变幻阴影样式！
最基础的四周阴影
其原理就是，盒子的后面有颜色为rgb(156, 156, 156)的盒子，把这个盒子高斯模糊，然后放大就会比前面的盒子大，才会到我们的视觉范围中！
box-shadow: 0 0 20px 2px rgb(156, 156, 156);
四周内阴影
box-shadow: 0 0 20px 2px rgb(156, 156, 156) inset;
左右阴影
这个的原理是：先模糊，然后缩小后面的盒子，再左移和右移，就只有左右才能看到！
box-shadow: 12px 0 10px -8px rgb(212, 212, 212),
-12px 0 10px -8px rgb(212, 212, 212);
同理上下阴影
box-shadow: 0 12px 10px -8px rgb(212, 212, 212),
0 -12px 10px -8px rgb(212, 212, 212);
多个阴影
逗号前为一个阴影，创建了三个阴影，对每个阴影进行不同的位置偏移！
box-shadow: 3px 3px yellow,
8px 8px blue,
12px 12px black;
- 注：盒子阴影不占用空间，不会影响其他盒子排列
=> 最后附上每个值的意义
box-shadow:h-shadow(正值往右移，负值往左移,必填) v-shadow(正值往下移，负值往上移，必填) blur(模糊大小，模糊的值越大越透明，可选) spread（2px，阴影向四周放大2px，负值为缩小） color(阴影的颜色，默认黑色) inset/outset（内阴影，默认外阴影）
