|
CSS3的box-shadow屬性可以讓我們輕松實(shí)現(xiàn)圖層陰影效果。我們來實(shí)戰(zhàn)詳解一下這個(gè)屬性。
1. box-shadow屬性的瀏覽器兼容性
先來看一個(gè)這個(gè)屬性的瀏覽器兼容性:
- Opera: 不知道是從哪個(gè)版本開始支持的，我在發(fā)這篇文章測(cè)試的時(shí)候，正好更新了Opera到最新的10.53版本，已經(jīng)支持box-shadow屬性。
- firefox通過私有屬性-moz-box-shadow支持。
- Safari和Chrome通過私有屬性-webkit-box-shadow支持。
- 所有IE不支持(不知道IE9是否有所改善)。別急，我們將在文章最后會(huì)介紹一些針對(duì)IE的Hack。
2. box-shadow屬性的語法
box-shadow有六個(gè)可設(shè)值:
img{box-shadow:陰影類型 X軸位移 Y軸位移 陰影大小 陰影擴(kuò)展 陰影顏色 }
當(dāng)不設(shè)陰影類型時(shí)，默認(rèn)為投影效果。當(dāng)設(shè)為inset時(shí)，為內(nèi)陰影效果。
X軸和Y軸位移不等同但類似于photoshop里面的”角度”和”位置。
陰影大小、擴(kuò)展、顏色和Photoshop里面的都同理。
3. 實(shí)例解析
讓我們通過幾個(gè)實(shí)例來看一個(gè)box-shadow的效果，先弄個(gè)簡單的html供測(cè)試：
<html>
<head>
<style type="text/css">CSS部份寫在這里</style>
</head>
<body>
<img src="test.jpg" />
</body>
</html>
請(qǐng)注意:為了省事兒，下面的CSS代碼中只寫了box-shadow，在實(shí)際使用中，你應(yīng)該把-moz-box-shadow和-webkit-shadow也寫上。你需要做的很簡，復(fù)制兩個(gè)box-shadow,在它們前面分別加上-moz-和-webkit-。 img {
-moz-box-shadow:2px 2px 10px #06C;
-webkit-box-shadow:2px 2px 10px #06C;
box-shadow:2px 2px 10px #06C;
} 出處：帕蘭映像
責(zé)任編輯：bluehearts
上一頁 下一頁 CSS3屬性box-shadow使用教程 [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 CSS3屬性box-shadow使用教程 [1]
第 2 頁 
