CSS3屬性 box-shadow使用教程

woff · 發表於 2014-9-14 16:08:58

CSS3的 box- shadow屬性可以讓我們輕鬆實現圖層陰影效果。我們來實戰詳解一下這個屬性。

1. box-shadow屬性的瀏覽器兼容性

先來看一個這個屬性的瀏覽器兼容性:

Opera: 不知道是從哪個版本開始支持的，我在發這篇文章測試的時候，正好更新了Opera到最新的10.53版本，已經支持box-shadow屬性。
firefox 通過私有屬性-moz- box-shadow支持。
Safari 和Chrome通過私有屬性-webkit-box-shadow支持。
< /ul>
- 所有IE不支持(不知道IE9是否有所改善)。別急，我們將在文章最後會介紹一些針對IE的 Hack。
2. box-shadow屬性的語法
box-shadow有六個可設值:
img{box- shadow:陰影類型X軸位移Y軸位移陰影大小陰影擴展陰影顏色}
- (2). 在上面的基礎上加上20px的擴展 img{box-shadow:0 0 10px 20px #06C;}
- (3). 內陰影，無位移，10px大小，沒有擴展，顏色#06C img{box-shadow:inset 0 0 10px #06C;}
  
  (4). 多重陰影效果
  box- shadow可以同時使用多次，我們來個四色的陰影。
  img{box-shadow:-10px 0 10px red,box-shadow:10px 0 10px blue,box-shadow:0 -10px 10px yellow,box-shadow: 0 10px 10px green}
  
  (5). 使用多個陰影屬性的順序問題
  當給同一個元素使用多個陰影屬性時，需要注意它的順序，最先寫的陰影將顯示在最頂層。比如下面這段代碼，我們先寫一個10px的綠色陰影，再寫一個 10px 大小但擴展20px的陰影。結果是：綠色陰影層在黃色陰影層之上。
  img{box-shadow:0 0 10px green;box-shadow:0 0 10px 20px yellow}
  
  但如果我們把順序調一下，像這樣:
  img{box-shadow:0 0 10px 20px yellow,box-shadow:0 0 10px green;}
  
  我們將看不到後寫的綠色陰影層，因為它先寫且半徑比較大的黃色層覆蓋掉了。
  4. 讓IE也支持box-shadow
  IE本身是shadow濾鏡可以實現類似效果的，還有一些js和.htc的hack文件可以幫助你在IE中實現這一效果。我也無法一一都去嘗試，這裡只介紹我用過的一個。
  ie-css3.htc是一個可以讓IE瀏覽器支持部份CSS3屬性的htc文件，不只是box-shadow，它還可以讓你的IE瀏覽器支持圓角屬性border-radius 和文字陰影屬性text-shadow。
  它的使用方法是：下載它並放到你的服務器目錄
  在你的<head></head>裡面寫入下面的代碼:
  
  藍色部份輸入要使用box- shadow屬性的選擇器，綠色部份輸入ie- css3.htc的絕對路徑，或相對路徑，反正要保證能訪問得到。
  然後這樣就OK了。但還是有幾點需要注意的是：
  - 當你使用了這個htc文件後，你的CSS裡面，只要寫有box-shadow, -moz- box-shadow或-webkit-box-shadow的任何一種，IE就會渲染。
  - 當使用了這個htc文件後，你不能這樣寫box-shadow: 0 0 10px red; 而應該是box-shadow: 0px 0px 10px red; 否則IE中會失效。
  - 不支持 RGBA值中的alpha透明度。
  - 不支持 inset內陰影。
  - 不支持陰影擴展。
  - 陰影在 IE中只會顯示為黑色，不管你設置成其它什麼顏色。
  所以說，這個腳本了僅僅是讓IE支持了部份的box-shadow值。

年火与剑 · 發表於 2014-10-24 14:29:28

真的这么神奇？

帳號		自動登錄		找回密碼
密碼				註冊

[教學] CSS3屬性 box-shadow使用教程

相關帖子