Firefox 3.5 实现的另一个有趣的 CSS3 特性是盒子阴影。此特性允许为几乎任何任意元素的框架投射一个“阴影”。

但是，由于 CSS3 盒子阴影属性仍在开发中，因此在 Firefox 中它被实现为 -moz-box-shadow。Mozilla 就是这样在 CSS 中测试实验性属性的，属性名称以“-moz-”开头。当规范最终确定后，属性名称将变为“box-shadow”。

工作原理

将盒子阴影应用于元素非常简单。 CSS3 标准 允许其值为

none |  [  ]*

其中 <shadow> 为

 = inset? && [ {2,4} && ? ]

前两个长度分别是阴影的水平和垂直偏移量。第三个长度是模糊半径（将其与 文本阴影属性 中的模糊半径进行比较）。最后，第四个长度是扩展半径，允许阴影相对于父元素的大小进行增长（正值）或缩小（负值）。

inset 关键字在标准本身中得到了很好的解释

如果存在，[它] 将阴影从外部阴影（将盒子阴影投射到画布上，就像它被抬高到画布上方一样）更改为内部阴影（将画布阴影投射到盒子上，就像盒子是从画布上剪切出来并移到其后面一样）。

但空谈无益，让我们看一些例子。

要绘制一个简单的阴影，只需定义一个偏移量和一个颜色，然后就可以开始了

 -moz-box-shadow: 1px 1px 10px #00f;

（本文中的每个示例首先都是实时示例，然后是来自 OSX 上 Firefox 3.5 的屏幕截图）。

类似地，您可以使用上述关键字绘制一个内阴影。

-moz-box-shadow: inset 1px 1px 10px #888;

借助扩展半径，您可以定义比应用它的元素更小（或更大）的阴影

-moz-box-shadow: 0px 20px 10px -10px #888;

如果需要，您还可以通过定义多个阴影来定义多个阴影，这些阴影用逗号分隔（由 Markus Stange 提供）

-moz-box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;

不同的阴影非常平滑地融合在一起，并且您可能已经注意到，定义它们的顺序确实会产生影响。由于box-shadow 是一个 CSS3 特性，因此 Firefox 3.5 遵循 CSS3 绘制顺序。这意味着，第一个指定的阴影显示在顶部，因此在设计多个阴影时请记住这一点。

作为最后一个示例，我想向您展示-moz-box-shadow 与 RGBA 颜色定义 的组合。RGBA 与 RGB 相同，但它添加了一个 alpha 通道透明度来更改颜色的不透明度。让我们在黄色背景上制作一个黑色、未模糊的盒子阴影，其不透明度为 50%

-moz-box-shadow: inset 5px 5px 0 rgba(0, 0, 0, .5);

如您所见，黄色背景在半透明阴影下可见，无需任何额外操作。当涉及背景图像时，此特性变得尤为有趣，因为您将能够看到它们透过盒子阴影。

跨浏览器兼容性

作为一项较新的、正在开发中的 CSS3 属性，盒子阴影尚未被浏览器制造商广泛采用。

• Firefox 3.5 支持该特性作为-moz-box-shadow，以及多个阴影、inset 关键字和扩展半径。
• Safari/WebKit 已采用与 Firefox 类似的方法，通过将该特性实现为-webkit-box-shadow。从 4.0 版开始支持多个阴影，而 WebKit 尚未支持内阴影或扩展半径特性。
• 最后，Opera 和 Microsoft Internet Explorer 尚未实现盒子阴影属性，但在 MSIE 中，您可能需要查看其专有的 DropShadow 过滤器。

为了获得尽可能广泛的覆盖范围，建议并行定义所有三个语法：-moz、-webkit 和标准 CSS3 语法。然后，适用的浏览器将选择并遵循它们支持的语法。例如

 -moz-box-shadow: 1px 1px 10px #00f;
 -webkit-box-shadow: 1px 1px 10px #00f;
 box-shadow: 1px 1px 10px #00f;

好消息是，box-shadow 属性在不支持的浏览器上会优雅地降级。例如，上面所有示例在 MSIE 中都将显示为普通且单调的无阴影盒子。

结论

CSS3 box-shadow 属性在浏览器（以及用户）中的可用性还不如text-shadow 属性，但随着 WebKit 对盒子阴影的支持有限以及 Firefox 3.5 提供的完全支持（就特性的当前状态草案而言），越来越多的用户将能够看到一定程度的 CSS 盒子阴影。

因此，作为 Web 开发人员，您可以使用此特性，确信您正在为使用现代浏览器的用户提供改进的体验，同时不会疏远使用旧版浏览器的用户。

更多资源
文档

• https://mdn.org.cn/en/CSS/-moz-box-shadow
• http://dev.w3.org/csswg/css3-background/#the-box-shadow

示例

• http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/
• http://www.css3.info/preview/box-shadow/
• http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html