日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

IE下實(shí)現(xiàn)類似CSS3 text-shadow文字陰影的幾種方法

一、開(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瀏覽器):

IE下實(shí)現(xiàn)類似CSS3 text-shadow文字陰影的幾種方法


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

復(fù)制代碼代碼如下:
.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);

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

復(fù)制代碼代碼如下:
div class="bg"
h4 class="font"張小姐長(zhǎng)大了!/h4
/div

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

IE下實(shí)現(xiàn)類似CSS3 text-shadow文字陰影的幾種方法


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

IE下實(shí)現(xiàn)類似CSS3 text-shadow文字陰影的幾種方法


可以看到不僅光暈顏色不純(雜色叢生) , 且文字邊緣也有不和諧的黑色糙邊 , 讓人不僅感嘆:你能不能再丑一點(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)生的效果基本上就是下面這幅模樣:

IE下實(shí)現(xiàn)類似CSS3 text-shadow文字陰影的幾種方法


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

復(fù)制代碼代碼如下:
.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;}

對(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ù)的 。

推薦閱讀