一、前言

我之前曾寫過一篇關(guān)于實(shí)現(xiàn)跨瀏覽器實(shí)現(xiàn)box-shadow效果的文章——“CSS實(shí)現(xiàn)跨瀏覽器兼容性的盒陰影效果”，本文雖然題目類似，但是核心部分是有差異的。前面的文章雖然實(shí)現(xiàn)IE下的盒陰影效果也是使用的濾鏡，但是使用的是shadow濾鏡，這種濾鏡的效果很牽強(qiáng)，效果過渡不自然，見下圖：

您可以狠狠地點(diǎn)擊這里：IE下陰影不自然demo

而本文實(shí)現(xiàn)的IE下的盒陰影效果就相對(duì)非常自然，而且還支持內(nèi)陰影的UI表現(xiàn)。到底是如何實(shí)現(xiàn)的，究竟效果如果，請(qǐng)繼續(xù)瀏覽。

二、瀏覽器純爺們模式下的支持情況

CSS3 box-shadow屬性基本上所有的現(xiàn)代瀏覽器都支持良好。但是要實(shí)現(xiàn)跨瀏覽器支持，你需要使用以下屬性的所有變體：

• 在Opera瀏覽器和IE9以及以上版本瀏覽器中（雖然還在媽媽肚子中），直接使用不帶前綴的box-shadow屬性
• 為支持Firefox瀏覽器，你需要使用-moz-前綴，即-moz-box-shadow
• 為支持webkit核心的瀏覽器（如Google Chrome 和 Apple Safari），你需要-webkit-前綴，合起來就是-webkit-box-shadow
• 一直到IE8瀏覽器，沒有純正的支持box-shadow屬性的CSS樣式，需要使用另外的方法模擬

主要瀏覽器對(duì)CSS3 box-shadow屬性支持情況一覽表

三、IE效果實(shí)現(xiàn)密匙 – 模糊濾鏡

本文實(shí)現(xiàn)IE下的盒陰影效果的也是借助于IE濾鏡，不同于“CSS實(shí)現(xiàn)跨瀏覽器兼容性的盒陰影效果”一文中的shadow濾鏡，本文實(shí)現(xiàn)效果的路徑為模糊濾鏡，英文名為blur filter，可以讓IE瀏覽器下的元素邊緣模糊處理。我們先從最簡單的實(shí)例開始展示：
一個(gè)普通的藍(lán)背景div的代碼可能是這樣子：

<div style="background:blue;height:100px;width:100px;"></div>

效果會(huì)如下所示：

ok，現(xiàn)在我們對(duì)其應(yīng)用IE模糊濾鏡，模糊大小為5像素，結(jié)果會(huì)怎樣，這是相關(guān)代碼：

<div style='background:blue;height:100px;width:100px;
  filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=5);
  -ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=5)";'>
</div>

結(jié)果在IE瀏覽器下：

現(xiàn)在大致對(duì)IE的模糊濾鏡有了簡單直觀的認(rèn)識(shí)了，現(xiàn)在關(guān)鍵是如何將其應(yīng)用到投影效果中呢，這就是下面的主要內(nèi)容，也是本文最為重要的核心的部分。

四、實(shí)現(xiàn)跨瀏覽器的盒陰影效果

對(duì)于支持box-shadow屬性的瀏覽器只要一層標(biāo)簽就可以搞定了，但是，如果要使用模糊濾鏡實(shí)現(xiàn)IE瀏覽器下的盒陰影效果，需要借助一個(gè)“幕后”的標(biāo)簽，這是一個(gè)與主體標(biāo)簽同樣大小的div，有著特定的背景色（取決于投影的顏色），以及模糊大小，由于與主體標(biāo)簽大小一致，現(xiàn)代瀏覽器不鳥IE私有的filter濾鏡，所以，此“幕后”標(biāo)簽的存在對(duì)于Firefox、Chrome這類現(xiàn)代瀏覽器的UI表現(xiàn)幾乎沒有任何影響。

對(duì)于現(xiàn)代瀏覽器，我們要實(shí)現(xiàn)一個(gè)元素的盒陰影效果，可能會(huì)使用如下的(x)html+CSS代碼：

(X)HTML代碼：
 <div class="baseBlock"></div> 

 CSS代碼：
.baseBlock{
     height:100px;
     width:100px;
     background:#f9f;
     box-shadow:10px 10px 5px #000;
     -moz-box-shadow:10px 10px 5px #000;
     -webkit-box-shadow:10px 10px 5px #000;
}

對(duì)于IE瀏覽器，要想實(shí)現(xiàn)平滑自然的陰影效果，需要借助一個(gè)“幕后”元素，這個(gè)元素與“臺(tái)前”的元素大小一致，不同的是其應(yīng)用了filter模糊濾鏡，我們可以有如下樣式代碼：

(X)HTML代碼：
<div class="ieBlock"></div> 

CSS代碼：
.ieBlock{
    height:100px;
    width:100px;
    background:#000;
    filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=10);
    -ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=10)";
}

如果單獨(dú)顯示此“幕后”標(biāo)簽，則效果如下：

現(xiàn)在我們要做的就是將上面進(jìn)行合并，為了更加接近于實(shí)際情況，這里的合并實(shí)例使用稍微復(fù)雜點(diǎn)的例子：
一個(gè)有文字，高度不定的div標(biāo)簽，如下CSS代碼：

.baseBlock{
    width:220px;
    position:relative;
}
.baseBlockIn{
    padding:10px 15px;
    background:#a0b3d6;
    box-shadow:10px 10px 5px #444;
    -moz-box-shadow:10px 10px 5px #444;
    -webkit-box-shadow:10px 10px 5px #444;
    position:relative;
    z-index:1;
}
.ieShadow{
    _width:220px;
    _height:220px;
    filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=5);
    -ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=5)";
    background-color:#444\9;
    position:absolute;
    left:5px;
    top:5px;
    right:-5px;
    bottom:-5px;
}

如下html代碼：

<div class="baseBlock">
    <div class="baseBlockIn">昨晚請(qǐng)多玩優(yōu)秀員工吃飯，聊了幾點(diǎn)職場體會(huì)。(1) 把自己當(dāng)老板看，象老板一樣
拼命干活，能力自然就提高了。有了能力，假如多玩不能給你好的回報(bào)，其他公司一定會(huì)給。(2) 不是每次付出就一定有
回報(bào)，但是不斷付出就一定會(huì)有回報(bào)。@李學(xué)凌 補(bǔ)充了一點(diǎn)：象你的老板一樣思考，能力會(huì)提高得更快。 </div>
    <div class="ieShadow"></div>
</div>

結(jié)果如下圖所示（IE7瀏覽器）：

Firefox3.6下：

您可以狠狠地點(diǎn)擊這里：跨瀏覽器盒陰影demo

說明：
1. baseBlockIn的層級(jí)要大于ieShadow的層級(jí)。
2. 對(duì)于高度自適應(yīng)的內(nèi)容，IE6無法實(shí)現(xiàn)，因?yàn)镮E6無法使用absolute拉伸實(shí)現(xiàn)高寬自適應(yīng)。但是，也不是沒有解決方法，一是js，獲取主體內(nèi)容的高度，然后賦給“幕后”投影層；二是直接克隆主體內(nèi)容里面的內(nèi)容，全封不動(dòng)地塞給“幕后”陰影層。實(shí)例中使用hack給IE6設(shè)置了高寬，所以在IE6瀏覽器也是有盒陰影效果的，如果高寬去掉是沒有效果的，但是IE7+瀏覽器下是沒有這個(gè)問題的。

五、內(nèi)陰影效果的實(shí)現(xiàn)

借助于blur濾鏡，還可以實(shí)現(xiàn)IE下的內(nèi)陰影效果。CSS3 box-shadow中有個(gè)inset屬性，可以實(shí)現(xiàn)內(nèi)陰影效果。所以，實(shí)現(xiàn)跨瀏覽器的內(nèi)陰影效果也是可能的。

例如下面的例子，首先是CSS代碼：

.baseBlock{
    width:220px;
    position:relative;
    overflow:hidden;
}
.baseBlockIn{
    padding:10px 15px;
    background-color:#888\9;
    box-shadow:inset 30px 30px 20px #888;
    -moz-box-shadow:inset 30px 30px 20px #888;
    -webkit-box-shadow:inset 30px 30px 20px #888;
}
.ieShadow{
    _width:220px;
    _height:220px;
    filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=20);
    -ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=20)";
    background-color:#fff\9;
    position:absolute;
    top:10px;
    left:10px;
    bottom:-10px;
    right:-10px;
}
.content{
    position:relative;
    z-index:1;
}

html代碼如下：

<div class="baseBlock">
    <div class="baseBlockIn">
        <div class="ieShadow"></div>
        <div class="content">昨晚請(qǐng)多玩優(yōu)秀員工吃飯，聊了幾點(diǎn)職場體會(huì)。(1) 把自己當(dāng)老板看，象老板一樣
拼命干活，能力自然就提高了。有了能力，假如多玩不能給你好的回報(bào)，其他公司一定會(huì)給。(2) 不是每次付出就一定有
回報(bào)，但是不斷付出就一定會(huì)有回報(bào)。@李學(xué)凌 補(bǔ)充了一點(diǎn)：象你的老板一樣思考，能力會(huì)提高得更快。</div>
    </div>
</div>

結(jié)果如下，首先是IE6瀏覽器：

Firefox3.6下的效果如下：

您可以狠狠地點(diǎn)擊這里：跨瀏覽器內(nèi)陰影效果demo

六、結(jié)語

IE濾鏡時(shí)會(huì)大大降低頁面的效能，我覺得除了是非不得已的情況下，去使用濾鏡實(shí)現(xiàn)這類兼容性的盒陰影效果。其實(shí)CSS3的很多屬性在IE下都是可以使用濾鏡實(shí)現(xiàn)或是基本實(shí)現(xiàn)的。然而，頁面的情況千差萬別，總會(huì)難免遇到非要使用投影效果的UI，此時(shí)，本文所展示的方法不失為最佳選擇之一。

參考文章：Cross-browser CSS box-shadows （http://dev./articles/view/cross-browser-box-shadows/），原文的一些實(shí)例實(shí)用性較低，建議采用本文我所展示的較為實(shí)際的使用方法。

歡迎探討，歡迎交流。要是文中要什么表述不準(zhǔn)確的地方，也歡迎指正。

原創(chuàng)文章，轉(zhuǎn)載請(qǐng)注明來自張鑫旭-鑫空間-鑫生活[http://www.]