前端视觉优化（一）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补充
- 对上面内容微调了一下
- 阴影是可以做成彩虹光晕那样子的，因为是可以同时设置多个背景阴影。即：box-shadow:5个参数，5个参数，5个参数。
应该都能看懂吧，要通过外延这个属性，把最底部的颜色拉出来一些，才不会被上面的覆盖（第一次逗号前颜色在最上面）
eg:box-shadow:1px 1px 3px red,2px 2px 3px yellow,3px 3px 3px orange
- 想要做成发光效果，就是白色阴影，配合明亮色背景，就有发光感觉
- 还有内阴影的，就是颜色参数后面加一个inset，一般用于点击或者hover动画
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
26
0- 0
已为社区贡献1条内容
所有评论(0)