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》陰影在邊框外時：
