跨瀏覽器 CSS 陰影的實現方法

CSS3 陰影

CSS3 里使用 box-shadow 屬性定義塊的陰影，基本語法如下：

box-shadow: 3px 3px 4px #000;

上面的樣式里，前面兩個 “3px” 表示陰影在 xy 兩個坐標軸上的偏移量，x軸的正方向向右，y軸正方向向下。這個坐標和我們平時用的有點出入。在 Firefox 和 Webkit 等瀏覽器里，為了達到最高效率，建議通過私有的 hack 實現 CSS 陰影，可以這樣寫：

-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;

CSS 陰影在 IE 瀏覽器里的實現

在 IE 里，我們只能通過濾鏡才能實現純 CSS 的陰影。要實現和上面的樣式一樣的效果，可以這樣寫：

/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";

在 IE 的 shadow 濾鏡里， Strength 表示陰影的濃度， Direction 表示陰影的角度，為了方便理解，我們可以理解為光線從極坐標 135° 的方向照下來，產生陰影。

整合代碼

整合同一個效果的 hack 時，我們遵循按兼容性從強到差的順序進行整合，也就是標準代碼寫在最前。

box-shadow: 3px 3px 4px #000;
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";

原文地址：http://blog.imbolo.com/cross-browsers-css-shadow/

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈