<rt id="xrfp9"></rt>

^{<style id="xrfp9"></style>}

css實現跨瀏覽器的box-shadow盒陰影效果告別圖片實現類似效果(2)

2024-07-11 08:49:24

字體：大中小

來源：轉載

供稿：網友

一、前言
我之前曾寫過一篇關于實現跨瀏覽器實現box-shadow效果的文章——“CSS實現跨瀏覽器兼容性的盒陰影效果”，本文雖然題目類似，但是核心部分是有差異的。前面的文章雖然實現IE下的盒陰影效果也是使用的濾鏡，但是使用的是shadow濾鏡，這種濾鏡的效果很牽強，效果過渡不自然，見下圖：
前文不自然的陰影效果張鑫旭-鑫空間-鑫生活

而本文實現的IE下的盒陰影效果就相對非常自然，而且還支持內陰影的UI表現。到底是如何實現的，究竟效果如何，請繼續瀏覽。
二、瀏覽器純爺們模式下的支持情況
CSS3 box-shadow屬性基本上所有的現代瀏覽器都支持良好。但是要實現跨瀏覽器支持，你需要使用以下屬性的所有變體：
•在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
不遠的曾經	7.0	3.5	4.0	4.0	10.10
目前	8.0	3.6	5.0	5.0	10.60
即將到來(最新2010)	8.0	3.6	5.0	5.0	10.60
將來 (2010之后)	9.0	4.0	5.*	6.0	11.0

— 支持

— 不支持

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

復制代碼

上一篇：css實現跨瀏覽器的盒陰影效果告別圖片實現類似效果

下一篇：css3背景圖片透明疊加屬性cross-fade簡介及用法實例