除了为文字添加阴影，我们还可以为盒模型添加阴影。盒模型阴影的属性名称为box-shadow,此属性与text-shadow一样有4个值，前两个值分别表示水平方向位移距离和垂直方向的位移距离，第三个值表示阴影的模糊半径（包含0及以下的值均表示无模糊），最后一个则是阴影的颜色。前Chrome 16+，FireFox8+，Opera11.6+，Safari5.1+以及IE9+均可直接使用box-shadow，而不需要-webkit-诸如此类的前缀。
语法格式如下所示：
box-shadow:[inset] x y blur [spread] color
box-shadow的参数说明如表1所示。
表1 box-shadow参数说明
与文字阴影text-shaow的参数意义一致，横向偏移量和纵向偏移量可以为负值，代表盒模型阴影向左偏移或向上偏移。盒模型阴影也是可以叠加的。添加多层阴影用“，”隔开。阴影叠加是先渲染后面的再渲染前面的。
1．最简单的用法
box-shadow:2px 2px 20px #000;
此语法说明为一段文字设定横向偏移量为2px，纵向偏移量为2px，模糊距离为20px的黑色阴影。以下是一个单层阴影的例子。代码如下:
使用浏览器直接打开这个文件，就可以看到浏览器对这个网页文件解释后的结果，我么可以看到box的外面增加了一层黑色的阴影，如图1所示。
图1 盒模型阴影
2．盒模型阴影投影方式
box-shadow: inset 2px 2px 20px #000;
此语法说明为盒模型嵌套一层内投影。横向偏移量为2px，纵向偏移量为2px，模糊距离为20px的黑色内投影。代码如下：
使用浏览器直接打开这个文件，就可以看到浏览器对这个网页文件解释后的结果，盒模型被加上了内投影，如图2所示：
图2 盒模型内投影
3．盒模型阴影叠加
box-shadow: 2px 2px 20px green，inset 2px 2px 20px blue;
此语法说明为盒模型设定双层阴影。第一层为横向偏移量为2px，纵向偏移量为2px，模糊距离为20的向外的绿色阴影，第二层为横向偏移量为2px，纵向偏移量为2px，模糊距离为20px的蓝色内投影。代码如下：
使用浏览器直接打开这个文件，就可以看到浏览器对这个网页文件解释后的结果，box被加上了两层阴影，其中有一层是内投影，如图3所示。
图3 盒模型阴影叠加
原文地址：https://www.cnblogs.com/itxdl/p/11880159.html