CSS实现文字阴影

摘自：http://ce.sysu.edu.cn/hope/Item.aspx?id=13402

设计师常常使用一些独特的字体效果和页面效果，阴影是其中一个，它可以让页面中的文字和元素具有立体的效果，从而被突出出来。比如对于文字阴影，传统的方法可能需要将文字切出来，直接使用图片，如果考虑SEO和网站性能，还可能会使用CSS Sprites等技术将图片整合。拼合图片会花掉你的大量时间，而且为了实现更好视觉效果，你可能还要使用高质量的32位png图片，这又要让你面对该死的IE 6的png透明问题！
　　
　　事实上，对于文字的阴影效果，我们完全可以用CSS来实现！
　　
　　Text-shadow
　　
　　text-shadow可以让我们实现完美的文字阴影效果。基本写法：
　　
　　text-shadow:[颜色 x轴 y轴 模糊半径],[颜色 x轴 y轴 模糊半径]...
　　
　　或者
　　
　　text-shadow:[x轴 y轴 模糊半径 颜色],[x轴 y轴 模糊半径 颜色]...
　　
　　这里的颜色就是阴影的颜色，你可以将颜色写在前面，也可以写在最后。x轴和y轴分别是其阴影的偏移位置，模糊半径可以理解为阴影长度。而且现在大部分浏览器都支持多层阴影，你可以用逗号分开多组设置(当然也可以只是用单个设置)。
　　
　　该属性目前被除IE之外的大部分浏览器支持，对于IE，我们可以使用shadow滤镜来实现：
　　
　　filter: Shadow(Color='black', Direction='135', Strength='2')
　　
　　你可能已经注意到，使用shadow滤镜只能定义角度 direction，而不能定义xy轴，z轴也被换成了strength。注意，使用该滤镜的时候，不能够设置背景颜色，否则滤镜将无效！另外如果你的数学不是很好，不太懂三角函数的算法，你可以使用IE的另外一个滤镜：dropshadow：
　　
　　filter: dropshadow(OffX=2, OffY=2, Color='black', Positive='true');
　　
　　好吧，IE总是会拖我们的后腿，不过值得一提的是，IE的这两个滤镜是支持多层阴影的！比如，可以这样写：
　　
　　filter: dropshadow(OffX=2, OffY=2, Color='red', Positive='true')
　　
　　dropshadow(OffX=2, OffY=2, Color='yelow', Positive='true')
　　
　　dropshadow(OffX=2, OffY=2, Color='blue', Positive='true');
　　
　　text-shadow的浏览器兼容性
　　
　　目前text-shadow被Firefox 3.5+，Safari 1.1+/chrome 2.0+和opera 9.5支持，IE不支持。需要注意的是，Safari只有4.0才支持多层阴影。
　　
　　•IE各个版本都不支持text-shadow；
　　
　　•Opera 9.5+支持最多6-9层阴影，并使用CSS2渲染顺序(最先定义的阴影在最下面)。而且出于性能的原因，模糊半径被限制到100px；
　　
　　•Gecko (Firefox)理论上支持无限层text-shadows (不过不建议尝试) 并遵循新的CSS3渲染顺序(最先定义的阴影在最上面)；
　　
　　•Safari 1.1-3.2只支持单层text-shadow (只显示第一个逗号之前的声明而无视后面的)。Safari 4.0+才支持多层阴影以及新的CSS3渲染顺序；