一、前言
其实这个属性是很细碎的知识点，之前想要阴影效果就直接看看别人的网站，然后复制一下别的，效果也还行，再后来呢，自己一想用到这个属性就去菜鸟教程查一下，然后自己慢慢调这个阴影，但是那几个阴影属性的值老是没记住，所以今天还是写一下吧！
二、重新认识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。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。