Question

文字阴影是最被广泛支持的CSS3特性之一。和@font-face一样，它有过一段短暂的前生，之后在CSS 2.1中被废弃。好在，它再次投胎转世，并获得了广泛支持（所有现在浏览器及Internet Explorer 9之后的IE均支持它）。

我们来看看文字阴影的基本语法：

记住，阴影值的速记规则永远是先向右再向下。因此，第一个值指的是右侧阴影的大小，第二个值指的是下方阴影的大小，第三个值指的是模糊距离（即阴影从开始变淡到完全消失的距离），最后一个值是阴影颜色。

6.1.1　HEX、HSL或RGB颜色都可以

阴影颜色不一定非得是十六进制值，也可以是HSL（A）或RGB（A）：

但要注意浏览器必须得同时支持HSL/RGB颜色和text-shadow才能渲染出效果。考虑到浏览器兼容性，在使用HSLA或RGBA阴影时我一般都这样做：

即先定义一个使用十六进制颜色的阴影（作为针对老版本浏览器的备用方案），然后再定义一个使用HSLA或RGBA颜色的阴影。

6.1.2　px、em或rem都行

阴影值也可以使用em或rem单位。如下所示的AND THE WINNER ISN’T网站的设计图：

在Photoshop中，EVERY YEAR这几个字的大小是102像素，文字阴影大小是4像素。因此使用我们百试不爽的目标元素尺寸÷上下文元素尺寸＝百分比尺寸这个公式来计算一下（4÷102＝.039215686），结果如下：

下图展示了浏览器中的效果：

我个人其实很少用em或rem作为阴影大小的单位。因为阴影一般都比较小，一个或两个像素的阴影，在所有视口中的效果都很不错。

6.1.3　取消文字阴影

如果你眼神够好，就会发现右侧内容区的第二行文字，WHEN I WATCH THE OSCARS I’M ANNOYED…. ，也应用了文字阴影。原因如下：

当前的文字阴影效果应用在整个<h1>标签上（该标签内包含<em>标签），所以我们需要取消<em>标签上的text-shadow：

修改后的效果如下图所示：

左上方阴影

使用负值可以制作出左上方阴影效果，例如：

效果如下图：

如果不需要阴影模糊效果，可以将text-shadow的第三个值（模糊半径）从声明中删除，如下所示：

这种简写假定第三个值没有声明，而前两个值表示阴影偏移距离。

6.1.4　制作浮雕文字阴影效果

我一直觉得text-shadow最适合用来制作浮雕文字。这种效果一般最适合应用在非白色背景的深色文字上，搭配以高亮颜色（如纯白色或类似颜色）的阴影。我们来给网站的导航链接添加浮雕效果试试：

效果如下图所示，可以说是恰到好处——有了一点凹陷效果，同时又没有过分炫耀文字阴影！

想要最好的浮雕文字效果，我有诀窍：不要模糊，不要水平阴影，仅在垂直方向设置1或2像素的“白影”即可。

6.1.5　多重文字阴影

我们还可以制作多重文字阴影，只需将两组值使用逗号分隔开即可，比如：

之前精妙的浮雕效果必不可少，否则文字会变模糊。所以这个声明合并了已有的投影效果和上一节的浮雕效果。浏览器中的效果如下图所示：

想要了解W3C对text-shadow属性的标准定义，请参阅http://www.w3. org/TR/css3-text/#text-shadow。