一、前言
其实这个属性是很细碎的知识点，之前想要暗影成果就间接看看他人的网站，而后复制一下别的，成果也还行，再起初呢，本人一想用到这个属性就去菜鸟教程查一下，而后本人缓缓调这个暗影，然而那几个暗影属性的值老是没记住，所以明天还是写一下吧！
二、重新认识box-shadow
菜鸟教程这么记录的：
语法
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow有六个属性值：
1.抛开最初一个最简略的，因为inset就是设置外部暗影，默认的暗影成果是out-set，而且out-set也是最罕用的。
2.color也不必了解，就是显示暗影的色彩而已。
所以真正须要了解的只有四个值：
3.h-shadow，即第一个属性值，他示意的暗影的垂直地位，能够为负值；而v-shadow即第二个属性值，示意的是暗影的程度地位，也能够为负值；
一开始看这两个程度与垂直的暗影地位的形容切实是一头雾水，最初思考一下并实践证明，这个其实很简略，无非是立体坐标系，以左上角为原点，程度的暗影就是往原点左边即正，垂直暗影就是往原点正下方为正：
菜鸟教程的案例借用一下：
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> div{ width:300px; height:100px; background-color:yellow; box-shadow: 10px 10px 5px #888888;}</style></head><body><div></div></body></html>
外围代码：box-shadow: 10px 10px 5px #888888;
抛开最初的三个，当初只剖析前两个，就是程度与处理的方向，能够看到暗影方向都是在正方向，这个是因为下面的box-shadow属性的前两个值都为正。
把它改为负值，就是这个样子：box-shadow: -10px -10px 5px #888888;
视觉上貌似负方向的暗影成果更强一点。
然而这样看，这个属性也太鸡肋了吧，因为只能够设置两条边，跟我平时看到的不一样啊，例如思否的box-shadow：
貌似上下左右都有啊！
这个怎么弄呢？
其实很简略，无非就是上下左右一起弄咯：
box-shadow: 10px 10px 5px #888888，-10px -10px 5px #888888；还是拿菜鸟的例子改一改，并改下背景色彩：
这个成果难看多了有没有。
相似的还能够这样用：
box-shadow: 10px 0px 10px red,//往右 红 0px -10px 10px blue,//往上 蓝 0px 10px 10px yellow,//往下 黄 -10px 0px brown;//往左 棕顺带试试inset属性：
box-shadow: 10px 0px 10px red inset, 0px -10px 10px blue inset, 0px 10px 10px yellow inset, -10px 0px brown inset;到这里就讲了box-shaodw的四个属性了，还剩下两个，这两个也是我最迷糊的：
（4）blur 可选。含糊间隔；spread 可选。暗影的大小；
这两个有什么区别，含糊的间隔，和暗影的大小。含糊间隔不就是含糊的尺寸吗，它不就代表着含糊的大小吗？而暗影大小示意含糊尺寸，不也是大小吗？
还是翻译为英语再了解一下，blur：含糊的意思，spread：流传的意思
持续拿菜鸟的例子：
div{ width:300px; height:100px; background-color:yellow; box-shadow: 10px 10px 5px 0px #888888;}此时blur：5px，spread：0px；
效果图：
把spread减少到100px试试：box-shadow: 10px 10px 5px 100px #888888;
能够看到含糊的范畴变大了，也体现了它流传的意思，此时把blur改为100px试试：box-shadow: 10px 10px 100px 100px #888888;
发现成果变含糊了：
所以blur次要用于含糊作用，spread用于暗影的大小，菜鸟教程的解释，有时还是不如本人的实际了解，因为每个人了解同一件事务的思维可能是不一样的。
好了，记录到这里吧，好困 ，写于2021-4-6 23:18。