CSS3中的box-shadow屬性,結合圖案的詳細分析
box-shadow
以由逗號分隔的列表來描述一個或多個陰影效果。(可以運用該屬性畫多邊框)該屬性讓你可以對幾乎所有元素的邊框產生陰影。如果元素同時設定了 border-radius
,陰影也會有圓角效果。
語法:
box-shadow: offset-x | offset-y | blur | spread | color | inset;
/* offset-x | offset-y | color */ box-shadow: 60px -16px teal; /* offset-x | offset-y | blur-radius | color */ box-shadow: 10px 5px 5px black; /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); /* inset | offset-x | offset-y | color */ box-shadow: inset 5em 1em gold; /* Any number of shadows, separated by commas */ box-shadow: 3px 3px red, -1em 0 0.4em olive; /* Global keywords */ box-shadow: inherit; box-shadow: initial; box-shadow: unset;
宣告單個 box-shadow 的用法:
- 給出兩個、三個或四個數字值的情況。
- 如果只給出兩個值, 這兩個值將被瀏覽器解釋為x軸上的偏移量 和y軸上的偏移量 。
- 如果給出了第三個值, 這第三個值將被解釋為模糊半徑的大小 。
- 如果給出了第四個值, 這第四個值將被解釋為擴充套件半徑的大小 。
- 可選, 關鍵詞
inset
。
宣告多個shadows時, 用逗號將shadows隔開。多個陰影時第一個陰影在最上面。
取值
<inset>
:預設陰影在邊框外。使用 inset
後,陰影在邊框內(即使是透明邊框),背景之上內容之下。
<offset-x>
<offset-y>
<length>
值,用來設定陰影偏移量。<offset-x>
設定水平偏移量,如果是負值則陰影位於元素左邊。 <offset-y>
設定垂直偏移量,如果是負值則陰影位於元素上面。如果兩者都是0,那麼陰影位於元素後面。這時如果設定了<blur-radius>
或<spread-radius>
則有模糊效果。
<blur-radius>
:這是第三個 <length>
值。值越大,模糊面積越大,陰影就越大越淡。 不能為負值。預設為0,此時陰影邊緣銳利。
<spread-radius>
:這是第四個 <length>
值。取正值時,陰影擴大;取負值時,陰影收縮。預設為0,此時陰影與元素同樣大。
<color>
:陰影的顏色。如果沒有指定,則由瀏覽器決定——通常是color
的值,不過目前Safari取透明。
結合圖案分析上面的一些設定選項:
案例程式碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
div
{ position:absolute;
left:200px;
top:200px;
width:100px;
height:100px;
background-color:yellow;
border-radius:0px;
box-shadow: 100px 100px 0 0 grey;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
(1)<spread-radius>
:取正值時,陰影擴大;取負值時,陰影收縮。預設為0,此時陰影與元素同樣大。
《1》當設定為0時:此時陰影的大小和原來的元素一樣大小,既沒有擴大也沒有縮小,不過看不到,它在當前元素的下面,若是將前兩個引數設定大些,讓其平移出來便可以看到。
border-radius:0px;
box-shadow: 100px 100px 0 0 grey; /*在水平方向和垂直方向上均移動原圖形邊長的大小,可以看到陰影是存在的*/
圖案顯示如下:
《2》當設定正值時,陰影擴大;取負值時,陰影收縮:如果引數的前兩項均為0,那麼當spread-radius值取0時,隱藏在其後,大小和原來元素相同,當設定為正值如20px時,會在原圖形的基礎上在上下左右方向分別增加20px。這時將blur-radius設定為0,也即是陰影邊緣不迷糊,會看的比較清楚。
border-radius:5px;
box-shadow: 0 0 0 20px grey;
(2)宣告多個shadows時, 用逗號將shadows隔開。多個陰影時第一個陰影在最上面,後面設定的依次隱藏在上一個的後面。
background-color:yellow;
border-radius:5px;
box-shadow: 0 0 0 20px grey,
0 0 0 40px green;
第二個陰影的擴充套件尺寸大於第一個,只能顯示第一個陰影覆蓋不住的那部分。
(3)<blur-radius>
:這是第三個 <length>
值。值越大,模糊面積越大,陰影就越大越淡。 不能為負值。預設為0,此時陰影邊緣銳利,主要描述陰影邊緣的虛化模糊範圍。
background-color:yellow;
border-radius:5px;
box-shadow: 0 0 0 20px grey,
0 0 0 40px green,
0 0 5px 60px red;
background-color:yellow;
border-radius:5px;
box-shadow: 0 0 0 20px grey,
0 0 0 40px green,
0 0 30px 60px red;
}
(4)<inset>
:預設陰影在邊框外。使用 inset
後,陰影在邊框內(即使是透明邊框),背景之上(會覆蓋住原元素的背景色),內容之下。
《1》陰影在邊框外時: