CSS Attribute ：text-shadow
近期在自己的项目中用到了这个属性，以前经常见到在精彩网页设计中以文字搭配阴影呈现的立体文字效果彰明较著，自己也曾有过跃跃欲试的冲动，后来在网上查了下它的兼容性，结果对IE所有版本浏览器都不兼容，由于IE浏览器的市场份额还是占多数，因此对于这个属性只是简单了解，没有深入研究并使用。
而现在，在项目中需要用到这个属性，那么就不得不为此细究一下了。
text-shadow属性在Firefox 3.5+，Safari 1.1+/chrome 2.0+和opera 9.5下被支持，对于IE只能期盼下一个版本了（对于IE浏览器的阴影效果微软提供了官方的解决方案，请继续往下看）。
此属性基本写法：
text-shadow:[颜色 x轴 y轴 模糊半径]
x,y轴控制阴影的偏移位置
颜色代表阴影的颜色
模糊半径可以控制阴影的模糊与不模糊
另外某些浏览器支持多层阴影，而对于多层阴影的表现方式是用逗号隔开在加一组属性，例如：
text-shadow:[颜色 x轴 y轴 模糊半径],[颜色 x轴 y轴 模糊半径]
(注：safari4.0后才支持多层阴影)
示例：
text-shadow:black 2px 2px 0
DEMO
那么IE浏览器该怎么办呢？毕竟多数人还在使用IE。
IE浏览器对于好多css的新特性支持都不是很好，尤其是IE6（警告大家IE6不要再用了，否则你的电脑会成为病毒的温床）那么有个什么好的方案解决IE对于这个属性的兼容性问题呢？尤其是IE6！
对于这个疑问，微软提出了官方的解决方案——利用shadow滤镜来实现：
filter: dropshadow(OffX=1, OffY=1, Color='#f5f5f5', Positive='true')
OffX对应text-shadow属性的X轴
OffY对应text-shadow属性的y轴
Color对应text-shadow属性的颜色
Positive设置为true就可以了
欲了解更多关于IE的这个滤镜，请查看官网介绍： Dropshadow
ok，现在可以放心的使用文字阴影来实现你想要的效果了。
Leave a Reply