一、開始的擦邊話
為了測試IE9浏覽器，下午晃晃蕩蕩把系統換成window7的了。果然，正如網上所傳言的一樣，IE9浏覽器确實不支援CSS3
text-shadow
屬性，且根據最近的IE10 preview版的回報，IE10浏覽器也是不支援
text-shadow
屬性的。至于為何不支援，就像女孩的心思一樣，我也是百思不得其解。
不過考慮到
text-shadow
的更多的是效果性質的屬性，且潛力有限，是以，就我個人而言，最近版本的IE浏覽器不支援該屬性我還是相對比較淡然的。雖然IE浏覽器不支援
text-shadow
文字陰影屬性，但是我們可以使用一些特殊的手段，或是方法實作類似于文字陰影的效果，而本文就将簡單展示幾種我所知的方法。
如果你看到這段文字，說明您正使用RSS閱讀或轉自《一棵樹-部落格園》，原文位址：http://www.cnblogs.com/atree/archive/2011/05/05/IE-CSS3-text-shadow-filter.html
二、glow濾鏡下的文字陰影效果
IE濾鏡中有個名叫
glow
的濾鏡，用來實作光暈效果，于是，我們可以用來實作無方向的文字陰影效果。
該濾鏡最簡單的使用類似下面：
filter:glow(color=black,strength=5); 上面實作的效果就是5像素擴散大小的黑色光暈，效果類似下面（截自IE9浏覽器）：
您可以狠狠地點選這裡：glow濾鏡下文字陰影效果demo
demo頁面中效果想對應的CSS代碼如下：
.bg{width:512px; height:340px; margin:1em auto; background:url(http://image.zhangxinxu.com/image/study/s/s512/mm19.jpg);}
.font{margin:0; padding:1em; color:#fff; text-shadow:0 0 5px rgb(0, 0, 0); font-size:36px; font-family:"微軟雅黑"; float:left; filter:glow(color=black, strength=5); 對應HTML代碼如下：
<div class="bg">
<h4 class="font">張小姐長大了！</h4>
</div> 不足
1. 雖然IE浏覽器的
glow
光暈濾鏡可以實作勉強可以稱為的文字陰影效果，但是其效果相比原生的
text-shadow
屬性就是玄彬和郭德綱的差別，如下firefox4下的
text-shadow
屬性效果：
并且對不同顔色的支援效果大相徑庭，例如，我們把光暈的黑色改成灰色，看看IE9浏覽器下的效果：
可以看到不僅光暈顔色不純（雜色叢生），且文字邊緣也有不和諧的黑色糙邊，讓人不僅感歎：你能不能再醜一點。
2. 既然是光暈濾鏡，就決定了此方法實作的文字陰影效果是無方向性的，就四周均勻擴散性質的。這是該方法一個較大的局限性。
三、MotionBlur濾鏡下的文字陰影效果
IE濾鏡中有個名叫MotionBlur的濾鏡，用術語稱呼其為“動感模糊濾鏡”。該濾鏡使用的示例如下：
filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=5, direction=145); 用中文釋義就是：145度方向上5像是大小的動感模糊。産生的效果基本上就是下面這幅模樣：
您可以狠狠地點選這裡：MotionBlur濾鏡下文字陰影效果demo
demo頁面中相關的CSS代碼如下：
.bg{width:512px; height:340px; margin:1em auto; background:url(http://image.zhangxinxu.com/image/study/s/s512/mm19.jpg);}
.font{margin:0; padding:1em; color:#fff; font-size:36px; font-family:"微軟雅黑"; text-shadow:1px 1px 5px #fff; filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=5, direction=145); float:left;} 對應HTML代碼與上面一緻，如下：
<div class="bg">
<h4 class="font">張小姐長大了！</h4>
</div> 不足
1. MotionBlur濾鏡雖然有了方向性，也可以設定大小，但是，其模糊出來的投影顔色卻隻能是文字本身的顔色。也就是說，單單一個标簽，一個濾鏡是無法實作類似于文字白色，投影黑色這種效果的。但是，這種先天性的不足也是可以通過某些手段修複的。
2. 此濾鏡在應用動感模糊的同時本身也被模糊了，相對于挖自己身上的肉填飽自己饑餓的肚子。這種實作效果顯然是會大打折扣的，看看正經八百
text-shadow
屬性下的白色投影效果（圖檔截自chrome浏覽器）：
正所謂人比人，氣死人啊。兩者的效果差距可以趕上鳳姐和志玲姐的差距了。然而，通過某些小手段，我們也可以讓MotionBlur濾鏡下的文字陰影效果爺變得很贊，這就是下面一節的内容。
四、MotionBlur濾鏡下文字陰影效果進一步優化
路上有坑怎麼辦？很簡單，填上就好，如果沒有實物填充，蓋個蓋子什麼的也是好的。是以，正如上面說到，文字應用動感濾鏡實作投影效果好比割肉補瘡，現在，我們隻要在被割掉的那塊肉上再補上一塊不就OK了嗎？
您可以狠狠地點選這裡：MotionBlur濾鏡下文字陰影效果優化demo
結果在IE9浏覽器的相容模式下（貌似是IE7 的核）的效果如下圖：
效果看上去要舒服多了。效果實作的原理是兩端一模一樣的文字互相重疊，背後的文字動感模糊，前面的文字就是很純潔的文字了。
CSS代碼如下：
.bg{width:512px; height:340px; margin:1em auto; background:url(http://image.zhangxinxu.com/image/study/s/s512/mm19.jpg);}
.font{margin:0; padding:1em; font-size:36px; font-family:"微軟雅黑";}
.text{color:#fff; position:absolute;}
.sh{color:#000; text-shadow:1px 1px 5px #000; filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=5, direction=145); *zoom:1;} HTML代碼如下：
<div class="bg">
<h4 class="font"><span class="text">張小姐長大了！</span><div class="sh">張小姐長大了！</div></h4>
</div> 考慮到不同IE浏覽器下的相容性問題，作為陰影效果的文字标簽需要使用block水準的标簽，且需要在IE6/IE7浏覽器下haslayout。另外，這裡的文字重疊是借助了
absolute
絕對定位元素的無高度性和無寬度性實作的。具體可參見我之前的“CSS 相對/絕對(relative/absolute)定位系列（二）”以及相關系列的文章。
不足
由于要借助于兩段不同的文字實作效果，是以，此方法不使用與長篇大論文字處的投影效果實作，像是标題啊，導航啊這些文字不是很多的地方就可以使用使用。
五、遠離text-shadow和濾鏡的文字陰影實作
這裡實作的原理的精髓其實跟上面的其實一緻，兩段一模一樣的文字，重疊顯示，不過，投影效果是通過兩段文字的錯位差實作的，例如通過
margin
負值讓上下的文字出現1像素的偏移。
您可以狠狠地點選這裡：margin錯位下的文字投影效果demo
在IE下的效果如下圖：
在FireFox浏覽器下效果為：
可以發現，此方法實作的效果是真正意義上的相容，基本上像素毫厘不差。
相關CSS代碼如下：
.bg{width:512px; height:340px; margin:1em auto; background:url(http://image.zhangxinxu.com/image/study/s/s512/mm19.jpg);}
.font{margin:0; padding:1em; font-size:36px; font-family:"微軟雅黑"; float:left;}
.sh{margin:-1px 0 0 -1px; color:#fff; position:absolute;} HTML代碼如下：
<div class="bg">
<h4 class="font"><span class="sh">張小姐長大了！</span><div>張小姐長大了！</div></h4>
</div> 不足
文字陰影效果的大小有限，且無法很好的實作透明度變化的投影效果。1像素的偏移投影是其最适用的情況。
六、快速的結語
就當文章寫到這兒的時候，我突然想到，IE下還有個模糊濾鏡，如果結合文字重疊技術，豈不第一個例子的四周擴散型投影效果有了較好的UI表現。不過礙于自己精力有限，門衛師傅也要休息，這裡就不折騰了，有興趣您可以嘗試下IE模糊濾鏡(blur)下的文字投影效果。
當然，一個人的智慧畢竟有限。如果您有比較好的實作文字陰影效果的方法，歡迎分享。
另外，由于重裝系統的原因，IE8，IE6等浏覽器暫時沒有機會測試，是以，自己不确定這些浏覽器下的表現是否令人滿意。如果有什麼糟糕的地方，歡迎指正。文中要是有表述不準确的地方也歡迎指正。
感謝閱讀。
原創文章，轉自：張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
本文位址：http://www.zhangxinxu.com/wordpress/?p=1613