css實現(xiàn)跨瀏覽器的box-shadow盒陰影效果告別圖片實現(xiàn)類似效果(2)
我要評論一、前言
我之前曾寫過一篇關于實現(xiàn)跨瀏覽器實現(xiàn)box-shadow效果的文章——“CSS實現(xiàn)跨瀏覽器兼容性的盒陰影效果”，本文雖然題目類似，但是核心部分是有差異的。前面的文章雖然實現(xiàn)IE下的盒陰影效果也是使用的濾鏡，但是使用的是shadow濾鏡，這種濾鏡的效果很牽強，效果過渡不自然
而本文實現(xiàn)的IE下的盒陰影效果就相對非常自然，而且還支持內(nèi)陰影的UI表現(xiàn)。到底是如何實現(xiàn)的，究竟效果如何，請繼續(xù)瀏覽。
二、瀏覽器純爺們模式下的支持情況
CSS3 box-shadow屬性基本上所有的現(xiàn)代瀏覽器都支持良好。但是要實現(xiàn)跨瀏覽器支持，你需要使用以下屬性的所有變體：
•在Opera瀏覽器和IE9以及以上版本瀏覽器中（雖然還在媽媽肚子中），直接使用不帶前綴的box-shadow屬性
•為支持Firefox瀏覽器，你需要使用-moz-前綴，即-moz-box-shadow
•為支持webkit核心的瀏覽器（如Google Chrome 和 Apple Safari），你需要-webkit-前綴，合起來就是-webkit-box-shadow
•一直到IE8瀏覽器，沒有純正的支持box-shadow屬性的CSS樣式，需要使用另外的方法模擬
主要瀏覽器對CSS3 box-shadow屬性支持情況一覽表
| Internet Explorer | Firefox | Safari | Chrome | Opera | |
|---|---|---|---|---|---|
| 很久以前 | 6.0 | 3.0 | 3.2 | 3.0 | 9.6 |
| 不遠的曾經(jīng) | 7.0 | 3.5 | 4.0 | 4.0 | 10.10 |
| 目前 | 8.0 | 3.6 | 5.0 | 5.0 | 10.60 |
| 即將到來(最新2010) | |||||
| 將來 (2010之后) | 9.0 | 4.0 | 5.* | 6.0 | 11.0 |
— 支持
— 不支持
三、IE效果實現(xiàn)密匙 – 模糊濾鏡
本文實現(xiàn)IE下的盒陰影效果的也是借助于IE濾鏡，不同于“CSS實現(xiàn)跨瀏覽器兼容性的盒陰影效果?”一文中的shadow濾鏡，本文實現(xiàn)效果的路徑為模糊濾鏡，英文名為blur filter?，可以讓IE瀏覽器下的元素邊緣模糊處理。我們先從最簡單的實例開始展示：
一個普通的藍背景div的代碼可能是這樣子：
<div style="background:blue;height:100px;width:100px;"></div>
效果會如下所示：
ok，現(xiàn)在我們對其應用IE模糊濾鏡，模糊大小為5像素，結果會怎樣，這是相關代碼：
<div style='background:blue;height:100px;width:100px;
filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=5);
-ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=5)";'>
</div>
結果在IE瀏覽器下：
現(xiàn)在大致對IE的模糊濾鏡有了簡單直觀的認識了，現(xiàn)在關鍵是如何將其應用到投影效果中呢，這就是下面的主要內(nèi)容，也是本文最為重要的核心的部分。
四、實現(xiàn)跨瀏覽器的盒陰影效果
對于支持box-shadow屬性的瀏覽器只要一層標簽就可以搞定了，但是，如果要使用模糊濾鏡實現(xiàn)IE瀏覽器下的盒陰影效果，需要借助一個“幕后”的標簽，這是一個與主體標簽同樣大小的div，有著特定的背景色（取決于投影的顏色），以及模糊大小，由于與主體標簽大小一致，現(xiàn)代瀏覽器不鳥IE私有的filter濾鏡，所以，此“幕后”標簽的存在對于Firefox、Chrome這類現(xiàn)代瀏覽器的UI表現(xiàn)幾乎沒有任何影響。
對于現(xiàn)代瀏覽器，我們要實現(xiàn)一個元素的盒陰影效果，可能會使用如下的html+CSS代碼：
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;
}
對于IE瀏覽器，要想實現(xiàn)平滑自然的陰影效果，需要借助一個“幕后”元素，這個元素與“臺前”的元素大小一致，不同的是其應用了filter模糊濾鏡，我們可以有如下樣式代碼：
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)";
}
如果單獨顯示此“幕后”標簽，則效果如下：
現(xiàn)在我們要做的就是將上面進行合并，為了更加接近于實際情況，這里的合并實例使用稍微復雜點的例子：
一個有文字，高度不定的div標簽，如下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">昨晚請多玩優(yōu)秀員工吃飯，聊了幾點職場體會。(1) 把自己當老板看，象老板一樣拼命干活，能力自然就提高了。有了能力，假如多玩不能給你好的回報，其他公司一定會給。(2) 不是每次付出就一定有回報，但是不斷付出就一定會有回報。@李學凌 補充了一點：象你的老板一樣思考，能力會提高得更快。 </div>
<div class="ieShadow"></div>
</div>
結果如下圖所示（IE7瀏覽器）：
Firefox3.6下：
說明：
1. baseBlockIn的層級要大于ieShadow的層級。
2. 對于高度自適應的內(nèi)容，IE6無法實現(xiàn)，因為IE6無法使用absolute拉伸實現(xiàn)高寬自適應。但是，也不是沒有解決方法，一是js，獲取主體內(nèi)容的高度，然后賦給“幕后”投影層；二是直接克隆主體內(nèi)容里面的內(nèi)容，全封不動地塞給“幕后”陰影層。實例中使用hack給IE6設置了高寬，所以在IE6瀏覽器也是有盒陰影效果的，如果高寬去掉是沒有效果的，但是IE7+瀏覽器下是沒有這個問題的。
五、內(nèi)陰影效果的實現(xiàn)
借助于blur濾鏡，還可以實現(xiàn)IE下的內(nèi)陰影效果。CSS3 box-shadow中有個inset屬性，可以實現(xiàn)內(nèi)陰影效果。所以，實現(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">昨晚請多玩優(yōu)秀員工吃飯，聊了幾點職場體會。(1) 把自己當老板看，象老板一樣拼命干活，能力自然就提高了。有了能力，假如多玩不能給你好的回報，其他公司一定會給。(2) 不是每次付出就一定有回報，但是不斷付出就一定會有回報。@李學凌 補充了一點：象你的老板一樣思考，能力會提高得更快。</div>
</div>
</div>
結果如下，首先是IE6瀏覽器：
Firefox3.6下的效果如下：
六、結語
IE濾鏡時會大大降低頁面的效能，我覺得除了是非不得已的情況下，去使用濾鏡實現(xiàn)這類兼容性的盒陰影效果。其實CSS3的很多屬性在IE下都是可以使用濾鏡實現(xiàn)或是基本實現(xiàn)的。然而，頁面的情況千差萬別，總會難免遇到非要使用投影效果的UI，此時，本文所展示的方法不失為最佳選擇之一。
相關文章
css3 box-shadow陰影(外陰影與外發(fā)光)圖示講解
這篇文章主要介紹了css3 box-shadow陰影(外陰影與外發(fā)光)，通過五個測試通過圖片展示了陰影的不同位置不同效果,需要的朋友可以參考下2017-08-11- 這篇文章主要介紹了詳解CSS3陰影 box-shadow的使用和技巧總結 ,具有一定的參考價值，有需要的可以了解一下。2016-12-03
- 下面小編就為大家?guī)硪黄P于CSS3文本陰影text-shadow屬性詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-08-08
詳解CSS3的box-shadow屬性制作邊框陰影效果的方法
這篇文章主要介紹了CSS3的box-shadow屬性制作邊框陰影效果的方法,box-shadow屬性還是十分強大的,能設定陰影的水平或垂直位置,以及陰影的顏色和尺寸等,需要的朋友可以參考下2016-05-10CSS3實現(xiàn)千變?nèi)f化的文字陰影text-shadow效果設計
這篇文章主要介紹了CSS3實現(xiàn)千變?nèi)f化的文字陰影text-shadow效果設計的相關資料，感興趣的小伙伴們可以參考一下2016-04-26CSS3 text-shadow實現(xiàn)文字陰影效果
這篇文章主要介紹了CSS3 text-shadow實現(xiàn)文字陰影效果的方法，豐富文字排版布局美化效果，感興趣的小伙伴們可以參考一下2016-02-24- 最近在整理學習CSS3的一些小知識，現(xiàn)在已經(jīng)整理了CSS3選擇器，CSS3圓角和CSS3元素陰影屬性的使用方法了。今天為大家整理一下CSS3中的字體陰影——text-shadow的使用方法。2016-01-08
- 這篇文章主要介紹了舉例詳解CSS中的text-shadow文字陰影效果使用,text-shadow的運用是CSS入門學習中的基礎知識,需要的朋友可以參考下2015-08-19
- 在ie下模擬css3中的box-shadow（陰影）可以使用ie的Shadow（陰影）濾鏡來實現(xiàn)，需要注意的是該濾鏡必須配合background屬性一起使用，否則該濾鏡失效2013-09-11
- 前段時間整理了CSS3中的漸變Gradient、透明度RGBA、邊框圓角box-radius三個新屬性的使用方法，這幾次繼續(xù)整理了有關于CSS3的text-shadow的使用方法,需要了解的朋友可以詳細2012-12-25
