實現IE兼容方案之一（濾鏡）

當 CSS3 趕上較低版本 IE，濾鏡就成了實現兼容性的折衷方案之一。雖然濾鏡是過期好久的技術了，但仍是能看出微軟的高瞻遠矚——早在 IE6 就用濾鏡實現了 bug 叢生的 CSS3 特性。

如下是 MSDN 《Alpha Filter》 中同時使用多個濾鏡的示例，適合各個 IE 版本。濾鏡之間使用空格或者回車隔開（DEMO）：

<DIV STYLE="width:100%; filter:
    progid:DXImageTransform.Microsoft.MotionBlur(strength=13, direction=310)
    progid:DXImageTransform.Microsoft.Blur(pixelradius=2)
    progid:DXImageTransform.Microsoft.Wheel(duration=3);">
        Blurry text with smudge of gray.</div>

 

然而，因爲濾鏡自己的缺陷，這種組合時不時會有意想不到的效果。例如，單獨使用  shadow 濾鏡是給盒子裏的文字加陰影特效的（DEMO）：

<div style="font-size:36px; width:300px; height:200px;filter:
progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45);">測試文字</div>

 

配合 Glow 濾鏡也很正常，能夠加上發光效果（DEMO）：

<div style="font-size:36px; width:300px; height:200px;filter:
progid:DXImageTransform.Microsoft.Glow(Color=red,Strength=5)
progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45);">測試文字</div>

 

然而，再加上 Gradiant 濾鏡，全部的效果就都加在 div 盒子而不是文字上的了 （DEMO）：

<div style="font-size:36px; width:300px; height:200px;filter:
progid:DXImageTransform.Microsoft.Gradient(enabled=bEnabled,startColorstr=#fff, endColorstr=black)
progid:DXImageTransform.Microsoft.Glow(Color=red,Strength=5)
progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45);">測試文字</div>

 

這或許是由於 Gradiant 濾鏡單獨使用時就是隻會應用在盒子上（DEMO）？

<div style="font-size:36px; width:300px; height:200px;filter:
progid:DXImageTransform.Microsoft.gradient(enabled=bEnabled,startColorstr=#fff, endColorstr=black)">測試文字</div>
 

 

總結

有的時候此法很差用，在於 IE 的濾鏡自己。好比 IE 的 Shadow 濾鏡和 Gradiant 濾鏡配合只做用於盒子。退一步說，即使 Shadow 單獨使用是文字陰影，有時也能看到難看的雜色（見配圖，配圖來自 鑫空間）。這裏的「有時」和濾鏡及文字所用的顏色以及瀏覽器都有關係。

 

貼出幾個好的文章連接：

http://www.javashuo.com/article/p-fuwjzceo-hk.html

http://w3help.org/zh-cn/causes/BT9011