共计 1804 个字符，预计需要花费 5 分钟才能阅读完成。
一、前言
其实这个属性是很细碎的知识点，之前想要暗影成果就间接看看他人的网站，而后复制一下别的，成果也还行，再起初呢，本人一想用到这个属性就去菜鸟教程查一下，而后本人缓缓调这个暗影，然而那几个暗影属性的值老是没记住，所以明天还是写一下吧！
二、重新认识 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。
