精通 CSS3 文本阴影

Konstantin Kichinsky

4.95/5 (6投票s)

2012 年 6 月 7 日

CPOL

6分钟阅读

20102

通过新的 CSS3 模块进一步研究精通阴影

30 天开发一个 Windows 8 应用

我们的阴影世界之旅仍在继续。如果您错过了上一篇文章，我们探讨了使用 box-shadow 属性的基础知识。今天我们将重点关注 text-shadow。

提醒一下：这两个属性目前定义在不同的模块中，但工作方式非常相似。所以，如果您已经熟悉了 box-shadow，那么理解 text-shadow 的基础知识会很容易。在开始实践之前，让我们稍微深入了解一下理论，找出它们之间的区别。

浏览器支持

text-shadow 规则得到了包括 IE10 在内的许多现代浏览器的支持。您也可以在 Windows 8 的 metro 风格应用中使用它。

text-shadow 与 box-shadow 对比

您需要了解的第一件事是，这两个规范（CSS3 背景和边框以及 CSS3 文本）目前都处于工作草案状态，因此它们仍可能发生变化。我将在讨论扩展距离时也会提到这一点。

如果您还记得 box-shadow 的语法，它是这样的

box-shadow: none |
<shadow> [ , <shadow> ]*;
<shadow>
= inset? && [ <length>{2,4} && <color>? ]

完整模式下的第二个规则可以展开为

shadow =
inset? h-offset v-offset blur-radius spread-distance color;

CSS3 文本规范以类似的方式描述了 text-shadow 属性

text-shadow: none | [
<length>{2,3} && <color>? ]#

其中

值的解释与 'box-shadow' 相同。

所以，您可能会认为一个 text-shadow 效果的完整语法是这样的

shadow =
h-offset v-offset blur-radius color;

这里有两个区别：第一，您无法为文本创建内阴影；第二，CSS3 文本中没有 text-shadow 的扩展距离。与 box-shadow 类似，您可以创建多个重叠的阴影。现在让我们开始实践。

text-shadow

偏移量和颜色

我们将从最基础的开始——定义一些水平和垂直偏移量，您只需要写上两个长度值（1.1–1.4）

正的偏移量会将阴影向右下方移动（1.1）

text-shadow:10px 10px; width:300px;

负值定义了向左上方移动的偏移量（1.2）

text-shadow:-5px -5px; width:300px; color:blue;

接下来是颜色。让我们首先讨论省略颜色时会发生什么。

根据当前规范版本

"如果颜色缺失，则使用的颜色取自‘color’属性。"

如果您查看不同的浏览器，可能会注意到它们的行为有所不同。基于 Webkit 的浏览器在这种情况下使用透明颜色——并非因为它们不好或做错了。关键在于，css3-backgrounds 的先前版本曾说：

省略的颜色是用户代理选择的颜色。

我相信这个问题将在 Chrome、Safari 和其他 Webkit 浏览器的未来版本中得到修复。

省略 text-shadow 的颜色，从而应用与文本相同的颜色，当您想创建模糊文本效果时（见下面的样本 2.3 和 2.4）会很有用。

要显式设置阴影的颜色，只需在规则末尾添加您想要的颜色即可

text-shadow:-1px -1px white; color:blue; background:#333; /* 1.3 */
text-shadow:1px 1px rgba(255,255,255, 0.5); color:blue; background:#eee; /* 1.4 */

请注意，在处理阴影时，您可以使用 CSS3 颜色模块中定义的任何颜色格式，包括带 alpha 通道的 rgba() 和 hsla() 函数。

模糊

第三个长度参数是模糊半径（2.1–2.4）

根据 box-shadow 属性的模糊半径定义，您应该使用非负值（0 表示不模糊）。确切的模糊算法可能因浏览器而异，但在数学意义上，它们都应该足够接近高斯模糊算法。

在前两个样本（2.1 - 2.2）中，我使用了不同的模糊半径

text-shadow:5px 5px 3px darkred; color:red; /* 2.1 */
text-shadow:4px -4px 10px red; color:azure;  background:#333; /* 2.2 */

在第二对（2.3 - 2.4）中，我只更改了文本和背景颜色，并且这两个阴影效果都使用了相同的 CSS 类 ‘blurred-shadow’

.blurred-shadow
{
    text-shadow:0px 0px 4px ; /* the color
is absent*/
}
color:red; /* 2.3 */
color:lightgray; background:#333; /* 2.4 */

扩展和收缩

现在是时候多谈谈 Web 标准了。我相信在尝试在您的任何项目中使用 text-shadow 的扩展值之前，您应该了解它。在 CSS3 文本模块的开发过程中，CSSWG 决定对此规范的先前版本进行更改，以便更快地达到推荐状态。在此先前版本中，text-shadow 属性包含一个额外的（第四个）长度参数——扩展距离。

与 box-shadow 类似，text-shadow 的扩展距离允许扩展或收缩阴影。

目前，text-shadow 的该定义已移至 L4——今天您可以在 css4-text 的 ED 中找到它。现在我将讨论如何使用扩展，您可以在最新版本的 IE10 中尝试（据我所知，目前 IE 是唯一支持 text-shadow 扩展的浏览器）。扩展是一个非常强大的工具，可以创建一些令人惊叹的示例！但它将来也可能发生变化。所以要小心！

要增加阴影，请将 spread-distance 设置为正值（3.1）

text-shadow:5px 5px 0px 3px lightgreen; color:green;

要减小——则设置为负值（3.2）

text-shadow:8px 8px 2px -3px darkgreen; color:green; font-weight:900;

在零偏移量的情况下，扩展距离可用于勾勒文本（3.3）

text-shadow:0 0 0 3px rgba(128, 255, 0, 0.75); color:green;  background:#333;

还有一则重要说明！ 实际上，今天不支持的浏览器会将 text-shadow 规则中的第四个长度视为无效的 text-shadow 定义，并会忽略这些规则。因此，如果您想为它们提供一定程度的兼容性，您需要像这样双重定义您的 text-shadow 规则

text-shadow: 0px 0px 10px lightgreen; /* 3.4 */
text-shadow: 0px 0px 10px 10px lightgreen; /* 3.5 */

有时可以使用多个不同方向的偏移量阴影来模拟阴影的扩展（请参阅下一章中的样本 4.6 和 4.7）。

多重阴影

最后，与 box-shadow 完全类似，您可以为文本应用多个阴影（4.1–4.5）

简单的勾边（4.1）

text-shadow: 0 0 0 3px white, 0 0 0 4px gray; color:magenta;

各种偏移量的不同模糊阴影（4.2）

text-shadow: 3px 3px 4px 2px rgba(255,255,255,0.35), 
             6px -6px 4px 2px rgba(255,255,255,0.25), 
             -3px -3px 4px 6px rgba(255,0,255,0.15);

霓虹灯效果（4.3）

text-shadow: 0 0 0 3px white, 
             0 0 2px 6px magenta,
             0 0 1px 9px white,
             0 0 6px 12px magenta;

另一个霓虹灯效果（4.4）

text-shadow: 0 0 2px #fff,
             0 0 4px 2px rgba(255,255,255,0.5),
             0 0 6px 6px #f0f,
             0 0 4px 7px #fff,
             0 0 3px 15px #222,
             -4px 0 2px 9px #f0f,
             4px 0 2px 9px #f0f,
             0 -4px 2px 9px #f0f,
             0 4px 2px 9px #f0f;

文本下划线（4.5）

text-shadow: 0 -3px 3px 15px white, 0 1px 2px 9px;
color:magenta;

模拟扩展

正如我已经说过的，从技术上讲，您可以使用多个阴影来创建类似于真实阴影扩展的效果。因此，要模拟样本（4.6）

text-shadow: 0px 0px 0px 4px magenta;

您可以尝试定义多个不同方向的偏移量阴影（4.7）

text-shadow: magenta 0px 2px, 
            
magenta 2px 0px, 
            
magenta -2px 0px, 
            
magenta 0px-2px, 
            
magenta -1.4px -1.4px, 
            
magenta 1.4px 1.4px, 
            
magenta 1.4px -1.4px, 
            
magenta -1.4px 1.4px;

实际上存在一些视觉差异。此外，您应该明白，这种技术的使用范围有限：它不够精确，并且会对页面的渲染性能产生负面影响。