CSS3中的text-shadow属性：文字阴影

首先，让我们看看WordPress 2.8后台使用了text-shadow的部分（绿色箭头所指处）。感觉如何？没错，这些效果都是通过CSS3属性实现的，而非使用图片。

什么是text-shadow？

text-shadow早在CSS2中就已存在，如今CSS3也将其纳入其中。此前，由于只有Safari支持该属性，所以在实际应用中较为少见。直到最近，Firefox 3.5开始支持text-shadow，重新唤起了人们对它的兴趣。

text-shadow能够为文字添加阴影效果。在设计过程中，我们可以利用这一CSS3属性增强文字的质感，而无需使用任何图片。

目前，支持text-shadow属性的浏览器包括Firefox 3.1+、Safari 3+、Opera 9.5+等现代浏览器（相关数据可能存在一定偏差）。不过，IE系列浏览器并不支持该属性。

text-shadow的语法格式如下：

text-shadow: color length length length;

其中，color表示阴影的颜色；length按顺序分别代表“X轴方向长度、Y轴方向长度、阴影模糊半径”。

在X轴上，正值表示阴影向右偏移，负值表示向左偏移；在Y轴上，负值表示阴影向上偏移。这三个值中，任意一个都可以为零，也可以为空（此时将采用默认处理）。

下面举个例子：

text-shadow: -1px 2px 3px #ffb69a;

上述代码表示阴影在X轴方向向左偏移1px，在Y轴方向向下偏移2px，阴影的模糊半径为3px，阴影颜色为#ffb69a。

我进行了一些小试验，并制作了一个 Demo页面。为了让不支持text-shadow属性的浏览器用户也能看到阴影效果，下面提供了相关截图（有位朋友说截图里的“火鸟”看起来像“鸡”）。

如果你使用的是Firefox 3.1+、Safari等支持text-shadow属性的浏览器，可以直接点击 Demo演示查看效果。