文本阴影text-shadow全兼容

2019独角兽企业重金招聘Python工程师标准>>>

css3的出现让人们有了更多的选择，其中的text-shadow:length length length color

第一个length指阴影离开文字的横向距离

第二个length指阴影离开文字的纵向距离

第三个length指阴影的模糊半径

color指阴影的颜色

很好用，但是在日常工作中真的能非常好的使用吗？对于很多要考虑IE的人来说，如果仅是渐进增强的效果的话，倒是没什么问题，但是如果必须要考虑IE呢？

早前从网上看到一个关于IE的css3效果插件ie-css3.htc（CSS3 support for Internet Explorer 6, 7, and 8，要了解此插件使用方法可以查看关于ie-css3.htc的使用方法一文）,这可以解决这个问题，经过实验可以达到效果,但是又极可能产生一些意想不到的问题，对于个人小站的话也许没什么问题，但是如果网站较大的话，那就不是一个很好的选择了。

由于除IE外的其他浏览器基本支持text-shadow，所以问题就是怎么解决IE下的阴影问题了，滤镜的使用。

filter:Dropshadow(offx=1,offy=0,color=#ffffff) Dropshadow(offx=0,offy=1,color=#ffffff) Dropshadow(offx=-1,offy=0,color=#ffffff) Dropshadow(offx=0,offy=-1,color=#ffffff)

Filter：DropShadow（Color=color，Offx=Offx，Offy=offy，Positive=positive）

该属性一共有四个参数： Color代表投射阴影的颜色。 Offx和offy分别X方向和Y方向阴影的偏移量。偏移量必须用整数值来设置。如果设置为正整数，代表X轴的右方向和Y轴的向下方向。设置为负整数则相反。

Positive参数有两个值：True为任何非透明像素建立可见的投影，False为透明的像素部分建立可见的投影。

相对与上面使用插件的方法，虽然使用滤镜会导致一些性能问题，但是不会有其他因此引起的问题，在某些必要的情况下也不失为一个好方法。

转载于:https://my.oschina.net/yangff/blog/87390