當 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 單獨使用是文字陰影，有時也能看到難看的雜色（見配圖，配圖來自 鑫空間）。這裏的“有時”和濾鏡及文字所用的顏色以及瀏覽器都有關系。

貼出幾個好的文章鏈接：

https://segmentfault.com/a/1190000002433305

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

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