今天我们来探究一下“阴影”。
这个阴影可不是什么心理阴影。我们探究的阴影是图形学中的阴影。同学们可以先想想，在图片中有了阴影，或者使用了阴影之后，为我们的图像提供了哪些特殊的效果？在高中大家在学习美术的时候，那个时候接触素描，去画一个杯子，或者画一个球体，这个时候往往出现，老师画的很逼真，立体感、层次感很强，自己虽说画出来了，在不刻意强调的前提下容易让人们误会（滑稽脸）。
经过老师的讲解，我们知道想让我们所画的物体，具有立体感，通常有：高光，暗面，灰面，投影（阴影），这几部分组成。说完了图形中的阴影后，来想想如何在我们的页面中绘画出阴影。这就涉及到我们今天要说的内容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: 10px10px;
}
结果：
通过这个我们能看出来是具有阴影的，根据上面的讲解能看出来是（10px10px）向下向右偏移10个px，同理负值是向上向左偏移。接下来我们看blur
2.blur
blur表示阴影的模糊半径。效果与设计软件中使用的高斯模糊滤镜一样。值为0意味着阴影完全不模糊。blur值越大，边角越不锋利，阴影越朦胧。不允许负值，负值等同于0。在我们上面的例子中修改：
CSS:
box-shadow: 10px10px10px;
结果：
我们能看到阴影虚化了。
这里要注意的是：W3C中没有规定浏览器厂商使用哪种方式实现模糊效果，反正效果与高斯模糊效果差不多就是了。但有一点我们需要注意的，那就是模糊效果会扩大阴影的面积。
Demo0是blur半径为0的效果，可以看到阴影尺寸与元素尺寸一模一样。而demo1是blur半径为10px的效果，可以看到阴影尺寸有所扩展了，而demo2则扩展得更多一些。
现在我们感性上认知到blur半径值大于0时会扩展阴影尺寸，那么到底扩展多少呢？那我们要先明确模糊发生的起始位置了。经过肉眼观察，模糊发生的起始位置就是阴影盒子的各边。事实也就是这样。至于发散距离blurradius(虚化半径)/ 2的距离。看的demo2中阴影尺寸已经与元素盒子重叠了，因为阴影盒子左边框向左发散了15px了，超过它俩之间10px的水平距离了。
3.spread
spread表示阴影的大小。当值为正数，阴影会向四周扩展。若值为负数，阴影会收缩，小于元素尺寸。默认值0会保持阴影和元素尺寸一致。
box-shadow: 0px0px0px10px;
在这里面我们能看到，当我们spread为10px，margin也为10px他俩是重合的，说明spread为正值，在原来的大小上（上下左右）+spread的值。当spread为为负值，再远的大小上– spread的值
4.color
color表示阴影的颜色。可以是任何颜色单位。这个没什么说的。
5.position
position表示阴影的位置，可选项。默认为外部阴影。可以通过使用inset关键字来制作内部阴影。外部阴影不用声明默认就是，想使用内部阴影需要声明inset在最前面最后都可以。
Likethis:
box-shadow: inset0px0px0px10px#0ff;
效果：
很明显阴影是在里面的。
接下来我们也对内阴影分析一下spread以及blurradius 。
通过上面的图我们能看出来。
对于spread当值为正值时，可以看出内阴影从边界开始填充。至于这个边界是从border开始，还是从padding开始呢？
CSS：
border:10pxsolid#f0f;
padding:10px;
box-shadow: inset0px0px0px10px#0ff;
我们可以看出来
以Padding区域为起点进行向内部扩展阴影。扩展半径为spread的值，负值没有意义，没有padding区域以content区域开始。
对于blurradius和spread类似这里就不演示了，给大家总结一下，模糊半径的值还是blurradius/2 开始位置同spread，有padding先从padding开始，没有从content开始。
下面说一说box-shadow的层次（z-index）
对于
外阴影（默认情况）：
对于外阴影：高与magin低于background。
对于内阴影：高与padding低于content。
Box-shadow不仅可以区分内外阴影还可以，应用多个阴影进行叠加。
每个阴影用‘，’隔开，likethis
CSS:
width:100px;
height:100px;
background:#fcc;
padding:10px;
border-radius:50%;
box-shadow:120px0px0-10px#f0f,
95px10px00px#d00,
30px20px0-10px#cdd,
90px-10px00px#add,
40px-30px00px#edd;
结果：
层次也是后写的在后边。因为可以重叠所以我们可以写多边框的一个元素
这样的一个准靶。（这个也就是刚开始出现的那张图片的原因）。
来源：51CTO
作者：渡一教育
链接：https://blog.51cto.com/13409950/2460933