CSS3屬性box shadow使用教程

2022-07-23 01:48:25 字數 1237 閱讀 9376

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

先來看乙個這個屬性的瀏覽器相容性:

box-shadow有六個可設值:

img

讓我們通過幾個例項來看乙個box-shadow的效果,先弄個簡單的html供測試:

請注意:為了省事兒,下面的css**中只寫了box-shadow,在實際使用中,你應該把-moz-box-shadow和-webkit-shadow也寫上。你需要做的很簡,複製兩個box-shadow,在它們前面分別加上-moz-和-webkit-。

img
img
這裡的顏色值是hex值,我們還可以使用rgba值,rgba值的好處是,它多了乙個alpha透明值,你可以控制陰影的透明度。

img
img

img
box-shadow可以同時使用多次,我們來個四色的陰影。

img
當給同乙個元素使用多個陰影屬性時,需要注意它的順序,最先寫的陰影將顯示在最頂層。比如下面這段**,我們先寫乙個10px的綠色陰影,再寫乙個10px大小但擴充套件20px的陰影。結果是:綠色陰影層在黃色陰影層之上。

img
但如果我們把順序調一下,像這樣:

img
我們將看不到後寫的綠色陰影層,因為它先寫且半徑比較大的黃色層覆蓋掉了。

ie本身是shadow濾鏡可以實現類似效果的,還有一些js和.htc的hack檔案可以幫助你在ie中實現這一效果。我也無法一一都去嘗試,這裡只介紹我用過的乙個。

ie-css3.htc是乙個可以讓ie瀏覽器支援部份css3屬性的htc檔案,不只是box-shadow,它還可以讓你的ie瀏覽器支援圓角屬性border-radius和文字陰影屬性text-shadow。

在你的裡面寫入下面的**:

藍色部份輸入要使用box-shadow屬性的選擇器,綠色部份輸入ie-css3.htc的絕對路徑,或相對路徑,反正要保證能訪問得到。

然後這樣就ok了。但還是有幾點需要注意的是:

CSS3屬性 box shadow測試

容器設定陰影 box shadow 語法 box shadow h shadow v shadow blur spread color inset 以上各屬性值的解析 horizontal 水平 指定水平偏移陰影。正值 即 5px 陰影向右,而為負值 即 10px 將使它偏向左。vertical 垂...

CSS3屬性之二 box shadow

box shadow 陰影水平偏移值 可取正負值 陰影垂直偏移值 可取正負值 陰影模糊值 陰影顏色 設定塊陰影 box shadow這個屬性應用的非常普遍,可以使你的元素立刻變得漂亮起來,只是記得不要把值設得太離譜。box shadow的四個引數 x offset x軸偏移 y offset y軸偏...

CSS3屬性之二 box shadow

box shadow 陰影水平偏移值 可取正負值 陰影垂直偏移值 可取正負值 陰影模糊值 陰影顏色 設定塊陰影 box shadow這個屬性應用的非常普遍,可以使你的元素立刻變得漂亮起來,只是記得不要把值設得太離譜。box shadow的四個引數 x offset x軸偏移 y offset y軸偏...