CSS box-shadow 属性用于设置元素的一个或多个阴影效果，多个阴影效果之间使用逗号来分隔。几乎所有的元素都可以使用该属性来制作阴影效果。
元素的阴影由5个部分组成：水平偏移值，垂直偏移值，可选的阴影模糊半径，可选的阴影扩展半径和可选的阴影颜色。
box-shadow: [水平偏移值] [垂直偏移值] [阴影模糊半径] [阴影扩展半径] [阴影颜色];
另外还可以制作元素的内部阴影效果。要制作内部阴影效果，只需要添加关键字 inset 即可。
box-shadow: inset [水平偏移值] [垂直偏移值] [阴影模糊半径] [阴影扩展半径] [阴影颜色];
如果为一个元素设置了圆角效果，那么阴影也会有圆角效果。边框图像（）不会对元素阴影的形状产生任何影响。
当为一个元素应用多个阴影效果时，各个阴影之间使用逗号来分隔。多重阴影在元素上的效果按阴影声明的先后顺序来堆叠：第一个声明的阴影在最上面，其它的阴影按声明的顺序，逐一放置在它的下面。
元素的阴影不会对界面布局产生影响，元素的阴影可能会发生重叠。
使用 box-shadow 属性时需要注意，浏览器渲染 box-shadow 效果的代价是非常昂贵的。如果为一个的元素渲染一个很大的阴影效果，那么页面在每次滚动的时候都会被迫重新绘制这些阴影，代价非常的高，页面性能会大幅下降。因此要避免在页面中使用大面积的阴影效果，或过多的阴影效果。
box-shadow 属性是一个可以制作动画效果的属性，但是使用该属性来制作动画，每一帧动画都会引起浏览器的重绘操作，严重影响页面的性能。解决的方法请参考。
官方语法
box-shadow: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
参数：
inset ：可选的内部阴影关键字。指定元素的阴影效果是外阴影还是内阴影。内阴影绘制在元素的边框之内，它在背景颜色或背景图像之上，在元素内容的下面。 <offset-x> ：阴影的水平偏移值（必填参数）。它使用值来指定元素的阴影向左或向右偏移的距离。可以是正数，也可以是负数。正数表示阴影在元素的右边，负数表示阴影在元素的左边。 <offset-y> ：阴影的垂直偏移值（必填参数）。它使用值来指定元素的阴影向上或向下偏移的距离。可以是正数，也可以是负数。正数表示阴影在元素的底部，负数表示阴影在元素的顶部。 <blur-radius> ：阴影模糊半径（可选参数）。也是一个值，不允许为负数。如果模糊半径为0，此时阴影边缘锐利。模糊半径越大，阴影的边缘就越模糊。 <spread-radius> ：阴影扩展半径（可选参数）。一个值，正数值使阴影在所有方向上扩展，负数值使阴影收缩。如果省略这个参数，它默认为0，那么阴影的大小和元素的大小相同。 <color> ：阴影颜色（可选参数）。它是一个类型的值。如果没有指定这个参数，浏览器会使用 color 属性指定的颜色来设置阴影颜色。box-shadow 属性的初始值为 none 。
应用范围box-shadow 属性可以应用在任何元素上。
示例代码
/* 所有可选参数都使用默认值 */
box-shadow: 20px 20px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, .2);
/* 内部阴影 */
box-shadow: inset 0px 2px 1px white;
/* 多重阴影 */
box-shadow: inset -5px -5px 10px -5px #333,
10px 10px 5px 0px #33CCFF
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3),
0 0 40px rgba(0, 0, 0, 0.1) inset;
下面是一组阴影效果的截图效果：
在线演示
下面的各种阴影效果是上面截图的实际在线效果：
box-shadow: 5px 5px 10px rgba(0,0,0,.3);
box-shadow: -5px -5px 10px rgba(0,0,0,.3);
box-shadow: 5px 5px 0 rgba(0,0,0,.8);
box-shadow: inset 5px 4px 3px rgba(0,0,0,.5);
box-shadow: inset 0 0 25px #fff;
box-shadow: inset -5px -5px 10px -2px #333, 10px 10px 5px 0px #33CCFF;
Material Design风格的阴影效果。
使用 box-shadow 属性，结合伪元素可以制作出各种非常漂亮的投影（drop shadow）效果。你可以。
浏览器支持
浏览器支持 box-shadow 属性的兼容性列表如下图所示：
IE8及以下版本的IE浏览器不支持 box-shadow 属性。你可以通过微软的滤镜或滤镜来制作阴影效果。