一、開(kāi)始的擦邊話
為了測(cè)試IE9瀏覽器，下午晃晃蕩蕩把系統(tǒng)換成window7的了。果然，正如網(wǎng)上所傳言的一樣，IE9瀏覽器確實(shí)不支持CSS3 text-shadow屬性，且根據(jù)最近的IE10 preview版的反饋，IE10瀏覽器也是不支持text-shadow屬性的。至于為何不支持，就像女孩的心思一樣，我也是百思不得其解。

不過(guò)考慮到text-shadow的更多的是效果性質(zhì)的屬性，且潛力有限，所以，就我個(gè)人而言，最近版本的IE瀏覽器不支持該屬性我還是相對(duì)比較淡然的。雖然IE瀏覽器不支持text-shadow文字陰影屬性，但是我們可以使用一些特殊的手段，或是方法實(shí)現(xiàn)類似于文字陰影的效果，而本文就將簡(jiǎn)單展示幾種我所知的方法。

二、glow濾鏡下的文字陰影效果
IE濾鏡中有個(gè)名叫g(shù)low的濾鏡，用來(lái)實(shí)現(xiàn)光暈效果，于是，我們可以用來(lái)實(shí)現(xiàn)無(wú)方向的文字陰影效果。

該濾鏡最簡(jiǎn)單的使用類似下面：

filter:glow(color=black,strength=5);
上面實(shí)現(xiàn)的效果就是5像素?cái)U(kuò)散大小的黑色光暈，效果類似下面（截自IE9瀏覽器）：

demo頁(yè)面中效果想對(duì)應(yīng)的CSS代碼如下：

對(duì)應(yīng)HTML代碼如下：


不足
1. 雖然IE瀏覽器的glow光暈濾鏡可以實(shí)現(xiàn)勉強(qiáng)可以稱為的文字陰影效果，但是其效果相比原生的text-shadow屬性就是玄彬和郭德綱的區(qū)別，如下firefox4下的text-shadow屬性效果：

并且對(duì)不同顏色的支持效果大相徑庭，例如，我們把光暈的黑色改成灰色，看看IE9瀏覽器下的效果：

可以看到不僅光暈顏色不純（雜色叢生），且文字邊緣也有不和諧的黑色糙邊，讓人不僅感嘆：你能不能再丑一點(diǎn)。

2. 既然是光暈濾鏡，就決定了此方法實(shí)現(xiàn)的文字陰影效果是無(wú)方向性的，就四周均勻擴(kuò)散性質(zhì)的。這是該方法一個(gè)較大的局限性。
三、MotionBlur濾鏡下的文字陰影效果
IE濾鏡中有個(gè)名叫MotionBlur的濾鏡，用術(shù)語(yǔ)稱呼其為“動(dòng)感模糊濾鏡”。該濾鏡使用的示例如下：

filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=5, direction=145);
用中文釋義就是：145度方向上5像是大小的動(dòng)感模糊。產(chǎn)生的效果基本上就是下面這幅模樣：

demo頁(yè)面中相關(guān)的CSS代碼如下：

對(duì)應(yīng)HTML代碼與上面一致，如下：

<div class="bg">
<h4 class="font">張小姐長(zhǎng)大了！</h4>
</div>
不足
1. MotionBlur濾鏡雖然有了方向性，也可以設(shè)定大小，但是，其模糊出來(lái)的投影顏色卻只能是文字本身的顏色。也就是說(shuō)，單單一個(gè)標(biāo)簽，一個(gè)濾鏡是無(wú)法實(shí)現(xiàn)類似于文字白色，投影黑色這種效果的。但是，這種先天性的不足也是可以通過(guò)某些手段修復(fù)的。

2. 此濾鏡在應(yīng)用動(dòng)感模糊的同時(shí)本身也被模糊了，相對(duì)于挖自己身上的肉填飽自己饑餓的肚子。這種實(shí)現(xiàn)效果顯然是會(huì)大打折扣的，看看正經(jīng)八百text-shadow屬性下的白色投影效果（圖片截自chrome瀏覽器）：

正所謂人比人，氣死人啊。兩者的效果差距可以趕上鳳姐和志玲姐的差距了。然而，通過(guò)某些小手段，我們也可以讓MotionBlur濾鏡下的文字陰影效果爺變得很贊，這就是下面一節(jié)的內(nèi)容。
四、MotionBlur濾鏡下文字陰影效果進(jìn)一步優(yōu)化
路上有坑怎么辦？很簡(jiǎn)單，填上就好，如果沒(méi)有實(shí)物填充，蓋個(gè)蓋子什么的也是好的。所以，正如上面說(shuō)到，文字應(yīng)用動(dòng)感濾鏡實(shí)現(xiàn)投影效果好比割肉補(bǔ)瘡，現(xiàn)在，我們只要在被割掉的那塊肉上再補(bǔ)上一塊不就OK了嗎？

您可以狠狠地點(diǎn)擊這里：MotionBlur濾鏡下文字陰影效果優(yōu)化demo

結(jié)果在IE9瀏覽器的兼容模式下（貌似是IE7 的核）的效果如下圖：

效果看上去要舒服多了。效果實(shí)現(xiàn)的原理是兩端一模一樣的文字相互重疊，背后的文字動(dòng)感模糊，前面的文字就是很純潔的文字了。

CSS代碼如下：

HTML代碼如下：


考慮到不同IE瀏覽器下的兼容性問(wèn)題，作為陰影效果的文字標(biāo)簽需要使用block水平的標(biāo)簽，且需要在IE6/IE7瀏覽器下haslayout。另外，這里的文字重疊是借助了absolute絕對(duì)定位元素的無(wú)高度性和無(wú)寬度性實(shí)現(xiàn)的。具體可參見(jiàn)我之前的“CSS 相對(duì)/絕對(duì)(relative/absolute)定位系列（二）”以及相關(guān)系列的文章。

不足
由于要借助于兩段不同的文字實(shí)現(xiàn)效果，所以，此方法不使用與長(zhǎng)篇大論文字處的投影效果實(shí)現(xiàn)，像是標(biāo)題啊，導(dǎo)航啊這些文字不是很多的地方就可以使用使用。
五、遠(yuǎn)離text-shadow和濾鏡的文字陰影實(shí)現(xiàn)
這里實(shí)現(xiàn)的原理的精髓其實(shí)跟上面的其實(shí)一致，兩段一模一樣的文字，重疊顯示，不過(guò)，投影效果是通過(guò)兩段文字的錯(cuò)位差實(shí)現(xiàn)的，例如通過(guò)margin負(fù)值讓上下的文字出現(xiàn)1像素的偏移。

您可以狠狠地點(diǎn)擊這里：margin錯(cuò)位下的文字投影效果demo

在IE下的效果如下圖：

在FireFox瀏覽器下效果為：

可以發(fā)現(xiàn)，此方法實(shí)現(xiàn)的效果是真正意義上的兼容，基本上像素毫厘不差。

相關(guān)CSS代碼如下：

HTML代碼如下：


不足
文字陰影效果的大小有限，且無(wú)法很好的實(shí)現(xiàn)透明度變化的投影效果。1像素的偏移投影是其最適用的情況。

六、快速的結(jié)語(yǔ)
就當(dāng)文章寫(xiě)到這兒的時(shí)候，我突然想到，IE下還有個(gè)模糊濾鏡，如果結(jié)合文字重疊技術(shù)，豈不第一個(gè)例子的四周擴(kuò)散型投影效果有了較好的UI表現(xiàn)。不過(guò)礙于自己精力有限，門(mén)衛(wèi)師傅也要休息，這里就不折騰了，有興趣您可以嘗試下IE模糊濾鏡(blur)下的文字投影效果。
當(dāng)然，一個(gè)人的智慧畢竟有限。如果您有比較好的實(shí)現(xiàn)文字陰影效果的方法，歡迎分享。
另外，由于重裝系統(tǒng)的原因，IE8，IE6等瀏覽器暫時(shí)沒(méi)有機(jī)會(huì)測(cè)試，所以，自己不確定這些瀏覽器下的表現(xiàn)是否令人滿意。如果有什么糟糕的地方，歡迎指正。文中要是有表述不準(zhǔn)確的地方也歡迎指正。

感謝閱讀。 原創(chuàng)文章，轉(zhuǎn)載請(qǐng)注明來(lái)自張?chǎng)涡?鑫空間-鑫生活

最新評(píng)論