详解 box-shadow
今天我们来探究一下“阴影”。在学习美术的时候，接触素描，去画一个杯子，或者画一个球体，这个时候往往出现，老师画的很逼真，立体感、层次感很强。经过老师的讲解，我们知道想让我们所画的物体，具有立体感，通常有：高光，暗面，灰面，投影（阴影），这几部分组成。说完了 图形中的阴影后，来想想如何在我们的页面中绘画出阴影。这就涉及到我们今天要说的内容 CSS3 中的 box-shadow。
探究 box-shadow
在说 box-shadow 之前，大家先来看看几张图片，具体细致的感受一下 box-shadow 阴影。
看起来是不是 一张很像纸的纸，有点阴影。
再来一个阴影
What? 这也是阴影？（不要拿 border 来骗我好吧。。。）
再来一个刺激一点的阴影
这个也用 box-shadow 画出来的？
上面的这些图片确实是通过 box-shadow 画出来的，可能有些小震惊（图 一很微妙，图三很炫酷，图二有点开玩笑）。接下来我们来正式探究 box-shadow 的神奇黑魔法！！！！
box-shadow 直译被称为“盒子阴影”，直译的结果与大家们的认知是相符的。CSS 中存在盒模型,针对于盒模型的阴影呗。这点大家要记住，是针对于盒子（元素） 的阴影，后面我们还会着重说明。
box-shadow 属性值由 6 部分组成。
语法形式：
box-shadow: offset-x offset-y blur spread color position;
这里的 position 可以写在最前面。也可以像上面一样写在最后面。
接下来我们来看看这几个属性都提供了什么样的功能？
1. offset-x offset-y
offset-x 用于声明阴影的水平偏移，就是阴影在 X 轴上的位置。
当值为正数， 阴影就位于元素右侧，
若值为负数，阴影位于元素的左侧。
同理
offset-y 用于声明阴影的垂直偏移，就是阴影在 Y 轴上的位置。
当值为正数， 阴影就位于元素下侧，
若值为负数，阴影位于元素的上侧。
例子：
CSS:
.demo {
width: 100px;
height: 100px;
background: #fcc;
box-shadow: 10px 10px;
} 结果：
通过这个我们能看出来是具有阴影的，根据上面的讲解能看出来是（10px 10px）向下向右偏移 10 个 px，同理负值是向上向左偏移。接下来我们看 blur
2. blur
blur 表示阴影的模糊半径。效果与设计软件中使用的高斯模糊滤镜一样。
值为 0 意味着阴影完全不模糊。
blur 值越大，边角越不锋利，阴影越朦胧。
不允许负值，负值等同于 0。
在我们上面的例子中修改：
CSS:
box-shadow: 10px 10px 10px; 结果：
我们能看到阴影虚化了。
这里要注意的是：W3C 中没有规定浏览器厂商使用哪种方式实现模糊效果， 反正效果与高斯模糊效果差不多就是了。但有一点我们需要注意的，那就是 模糊效果会扩大阴影的面积。
Demo0 是 blur 半径为 0 的效果，可以看到阴影尺寸与元素尺寸一模一样。 而 demo1 是 blur 半径为 10px 的效果，可以看到阴影尺寸有所扩展了，而 demo2 则扩展得更多一些。
现在我们感性上认知到 blur 半径值大于 0 时会扩展阴影尺寸，那么到底扩展多少呢？
那我们要先明确模糊发生的起始位置了。经过肉眼观察，模糊发生的起始位置就是阴影盒子的边。事实也就是这样。至于发散距离 blur radius(虚化半径) / 2 的距离。看的 demo2 中阴影尺寸已经与元素盒子重叠了，因为阴影盒子左边框向左发散了 15px 了，超过它俩之间 10px 的 水平距离了。
3. spread
spread 表示阴影的大小。
当值为正数，阴影会向四周扩展。
若值为负数， 阴影会收缩，小于元素尺寸。
默认值 0 会保持阴影和元素尺寸一致。
在这里面我们能看到，当我们 spread 为 10px， margin 也为 10px 他俩是重合的。
说明 spread 为正值，在原来的大小上（上下左右） + spread 的值。 当 spread 为为负值，再远的大小上 – spread 的值
4. color
color 表示阴影的颜色。
可以是任何颜色单位。
这个没什么说的。
5. position
position 表示阴影的位置，可选项。
默认为外部阴影。可以通过使用 inset 关键字来制作内部阴影。外部阴影不用声明默认就是，想使用内部阴影需要声明 inset 在最前面最后都可以。
例如:
box-shadow: inset 0px 0px 0px 10px #0ff; 效果：
很明显阴影是在里面的。
接下来我们也对内阴影分析一下 spread 以及 blur radius 。
通过上面的图我们能看出来。
对于 spread 当值为正值时，可以看出内阴影从边界开始填充。至于这个边界 是从 border 开始，还是从 padding 开始呢？
CSS：
border: 10px solid #f0f;
padding: 10px;
box-shadow: inset 0px 0px 0px 10px #0ff; 我们可以看出来
以 Padding 区域为起点进行向内部扩展阴影。扩展半径为 spread 的值，负值没有意义，没有 padding 区域以 content 区域开始。
对于 blur radius 和 spread 类似这里就不演示了，给大家总结一下，模糊半径的值 还是 blur radius/2 开始位置同 spread，有 padding 先从 padding 开始，没有从 content 开始。
下面说一说 box-shadow 的层次（z-index） 对于外阴影（默认情况）：
对于外阴影：高与 magin 低于 background。
对于内阴影：高与 padding 低于 content。
Box-shadow 不仅可以区分内外阴影还可以，应用多个阴影进行叠加。
每个阴影用‘，’隔开。
例如：
CSS：
width: 100px;
height: 100px;
background: #fcc;
padding: 10px;
border-radius: 50%;
box-shadow: 120px 0px 0 -10px #f0f,
95px 10px 0 0px #d00,
30px 20px 0 -10px #cdd,
90px -10px 0 0px #add,
40px -30px 0 0px #edd;
结果：
层次也是后写的在后边。因为可以重叠所以我们可以写多边框的一个元素
这样的一个准靶。
长按二维码关注，一起努力。
助力寻人启事
微信公众号回复 加群 一起学习。