这篇文章来自 Frederic Wenzel，他在 Mozilla 的 Web 开发团队工作。

CSS 属性 text-shadow 的作用顾名思义：它允许您创建文本的略微模糊、略微偏移的副本，最终看起来有点像现实世界中的阴影。

text-shadow 属性最初是在 CSS2 中引入的，但由于当时定义不当，其支持在 CSS2.1 中再次被放弃。该功能在 CSS3 中重新引入，现在已 集成到 Firefox 3.5 中。

工作原理

根据 CSS3 规范，text-shadow 属性可以具有以下值

none | [, ] * ,

<shadow> 定义为

[ ?   ? |   ? ? ], 

其中前两个长度分别表示水平和垂直偏移量，第三个是可选的模糊半径。最好的描述方法是举例说明。

例如，我们可以这样创建一个简单的阴影

text-shadow: 2px 2px 3px #000;

（所有示例都首先是一个实时示例，然后是工作功能的图片——因此您可以将浏览器的行为与 Firefox 3.5 在 OSX 上的行为进行比较）

如果您是硬边界的粉丝，您可以完全不使用模糊半径

text-shadow: 2px 2px 0 #888;

发光文本和多个阴影

但是由于该功能的灵活性，乐趣并没有止步于此。通过改变文本偏移量、模糊半径，当然还有颜色，您可以实现各种效果，例如神秘的光晕

 text-shadow: 1px 1px 5px #fff; 

或简单的模糊模糊

text-shadow: 0px 0px 5px #000;

最后，您可以添加“多个阴影”，允许您创建非常“热”的效果（由 http://www.css3.info/preview/text-shadow/ css3.info 提供）

text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200

理论上，您可以在 Firefox 3.5 中同时应用的 text-shadow 数量是无限的，尽管您可能希望坚持使用合理的数量。与所有 CSS 属性一样，您可以使用 JavaScript 动态修改 text-shadow

性能、可访问性和跨浏览器兼容性

在网络上使用图片（甚至更糟糕的是 Flash）来创建文本阴影的日子已经屈指可数，这有两个原因。

首先，使用文本而不是图片有明显的优势。不使用图片可以节省带宽和 HTTP 连接开销。可访问性，对于使用屏幕阅读器和搜索引擎的人来说，都得到了极大的改善。并且页面缩放效果会更好，因为文本可以缩放，而不是使用像素插值来放大图像。

其次，此功能在很大程度上与跨浏览器兼容。

• Opera 从 9.5 版本开始支持 text-shadow。根据 Mozilla 开发者中心 的说法，Opera 9.x 支持在同一元素上最多 6 个阴影。
• Safari 从 1.1 版本（以及其他基于 WebKit 的浏览器）开始就拥有此功能。
• Internet Explorer 不支持 text-shadow 属性，但该功能会优雅地降级为普通文本。此外，如果您想在 MSIE 中模拟一些 text-shadow 功能，可以使用 Microsoft 专有的 “Shadow” 和 “DropShadow” 过滤器。
• 与 MSIE 类似，当其他旧版浏览器不支持该功能（包括 Firefox 3 及更早版本）时，它们只会显示没有阴影的普通文本。

值得一提的是“绘制顺序”：虽然 Opera 9.x 遵循 CSS2 绘制顺序（即，第一个指定的阴影绘制在底部），但 Firefox 3.5 遵循 CSS3 绘制顺序（第一个指定的阴影在顶部）。绘制多个阴影时请记住这一点。

结论

text-shadow 是一款微妙但功能强大的 CSS 功能，现在 Firefox 3.5 已支持它，因此在可预见的未来可能会在网络上得到广泛采用。由于它在旧版浏览器中可以优雅地降级，因此开发人员可以安全地使用它，并且随着时间的推移，越来越多的用户会看到它。

最后，一些明智之言：像任何视觉效果一样，使用它就像在汤里放盐一样——适量使用，而不是用桶装。如果全世界的 Web 开发人员过度使用它，text-shadow 可能会走向一个短暂而痛苦的死亡。如果我们让用户像 排版极客看到“Papyrus”一样对文本阴影感到畏缩，那将是一件令人悲伤的事情，因此需要将此功能深深地埋藏在我们的宝箱中。

话虽如此：赶快试试吧！

更多资源

文档

• https://mdn.org.cn/en/CSS/text-shadow
• http://www.quirksmode.org/css/textshadow.html
• http://www.w3.org/TR/css3-text/#text-shadow

示例

• http://maettig.com/code/css/text-shadow.html
• http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/
• https://bug10713.bugzilla.mozilla.org/attachment.cgi?id=273985
• https://bug10713.bugzilla.mozilla.org/attachment.cgi?id=197360