box-shadow 是一个 CSS3 属性，它让我们几乎能在任意元素上添加阴影效果，就像我们在设计软件中的可添加的下拉阴影（drop shadow）一样。这种阴影效果让我们能在原本是平面的 2 维页面上创造出立体感。
语法box-shadow 属性接受值最多由五个不同的部分组成。
box-shadow: offset-x offset-y blur spread color position;不像其它的属性，比如 border，它们的接受值可以被拆分为一系列子属性，box-shadow 属性没有子属性。这意味着记住这些组成部分的顺序更加重要，尤其是那些长度值。
offset-x第一个长度值指明了阴影水平方向的偏移，即阴影在 x 轴的位置。值为正数时，阴影在元素的右侧；值为负数时，阴影在元素的左侧。
.left { box-shadow: 20px 0px 10px 0px rgba(0,0,0,0.5) }.right { box-shadow: -20px 0px 10px 0px rgba(0,0,0,0.5) } offset-y第二个长度值指明了阴影竖直方向的偏移，即阴影在 y 轴的位置。值为正数时，阴影在元素的下方；值为负数时，阴影在元素的上方。
.left { box-shadow: 0px 20px 10px 0px rgba(0,0,0,0.5) }.right { box-shadow: 0px -20px 10px 0px rgba(0,0,0,0.5) } blur第三个长度值代表了阴影的模糊半径，举例来说，就是你在设计软件中使用 高斯模糊 滤波器带来的效果。值为 0 意味着该阴影是固态而锋利的，完全完全没有模糊效果。blur 值越大，阴影则更不锋利而更朦胧 / 模糊。负值是不合法的，会被修正成 0。
.left { box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5) }.middle { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) }.right { box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5) } colorcolor 部分的值正如你所预料的，是指阴影的颜色。它可以是任意的颜色单元 （见 在 CSS 中与颜色打交道）。
.left { box-shadow: 0px 0px 20px 10px #67b3dd }.right { box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.5) } 多重阴影box-shadow 属性在一个元素上能接受多个阴影值。添加至 box-shadow 的阴影以逗号分离。
.foo { box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) inset, /* inner shadow */ 20px 20px 10px 0px rgba(0,0,0,0.5); /* outer shadow */} 圆形阴影box-shadow 属性的边缘半径由同个元素上的 border-radius 所控制。
.foo { box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5); border-radius: 50%;} 大杂烩把这些部分放在一起，我们能通过使用 box-shadow 创造出一些非常惊人的效果。
一个可选的非布局边框我们可以使用 box-shadow 属性创造元素的边框，而不会影响盒模型或者页面的其他布局。而且，使用多重阴影，我们可以给元素的不同边框创造不一样的效果。
.simple { box-shadow: 0px 0px 0px 40px indianred;} .multiple { box-shadow: 20px 20px 0px 20px lightcoral, -20px -20px 0px 20px mediumvioletred, 0px 0px 0px 40px rgb(200,200,200);} 弹出效果在 box-shadow （与 transform） 上使用转换，我们可以做出元素移近或移远的视觉效果。
.popup { transform: scale(1); box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3); transition: box-shadow 0.5s, transform 0.5s;}.popup:hover { transform: scale(1.3); box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.3); transition: box-shadow 0.5s, transform 0.5s;} 浮动效果我们也能给 :after 为元素添加 box-shadow 属性。利用这点，我们能在元素下面做出阴影，提供被举起与丢下的视觉效果。
.floating { position: relative; transform: translateY(0); transition: transform 1s;} .floating:after { content: ""; display: block; position: absolute; bottom: -30px; left: 50%; height: 8px; width: 100%; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.4); border-radius: 50%; background-color: rgba(0, 0, 0, 0.2); transform: translate(-50%, 0); transition: transform 1s;} /* Hover States */.floating:hover { transform: translateY(-40px); transition: transform 1s;}.floating:hover:after { transform: translate(-50%, 40px) scale(0.75); transition: transform 1s;}还有很多能利用 box-shadow 实现的效果。例如，这个有名的 pen 就使用它做出了 8 种纸张效果。尽管它表面上只是一个创造简单下拉阴影（drop shadow）的工具，但它可比那强多了。
原文链接：https://bitsofco.de/the-box-shadow-property/
众成翻译：http://www.zcfy.cc/article/373