前端视觉优化（一）CSS边框阴影、四周阴影讲解

先上一个代码

通俗讲解吧，分5个参数
1.控制水平位置阴影，+为右边，0为中间（即两边都有，通过参3控制大小）
2.控制垂直方向阴影，+为下边，0为中间（即两边都有，通过参3控制大小）
3.模糊距离
4.阴影尺寸 （所谓向外延伸） （3和4实际效果有丢丢区分，自己调一下即可）
5.阴影颜色

·
·
·

其实有6个参数，以下是官方文档
h-shadow 	必需。水平阴影的位置。允许负值。 	测试
v-shadow 	必需。垂直阴影的位置。允许负值。 	测试
blur 	可选。模糊距离。 	测试
spread 	可选。阴影的尺寸。 	测试
color 	可选。阴影的颜色。请参阅 CSS 颜色值。 	测试
inset 	可选。将外部阴影 (outset) 改为内部阴影。

·

本人亲调，十分顺眼 哈哈

box-shadow: 0 0 5px 1px #999    

·

2020.12.22补充

1. 对上面内容微调了一下
2. 阴影是可以做成彩虹光晕那样子的，因为是可以同时设置多个背景阴影。即：box-shadow:5个参数，5个参数，5个参数。

应该都能看懂吧，要通过外延这个属性，把最底部的颜色拉出来一些，才不会被上面的覆盖（第一次逗号前颜色在最上面）

eg:box-shadow:1px 1px 3px red,2px 2px 3px yellow,3px 3px 3px orange

1. 想要做成发光效果，就是白色阴影，配合明亮色背景，就有发光感觉
2. 还有内阴影的，就是颜色参数后面加一个inset，一般用于点击或者hover动画