說明
box-shadow 屬性可以給元素邊框周圍新增一個或者多個陰影效果。定義多個陰影，使用逗號分隔。
語法
box-shadow: none | [inset? && [<offset-x> <offset-y> <blur-radius>? <spread-radius>? && <color>? ] ]
解釋
none：預設值為none，表示沒有陰影
inset：可選。將邊框外陰影改為邊框內陰影（即使是透明邊框），背景之上內容之下。如果不寫，預設為邊框外陰影。inset只可寫在最前或者最後。
offset-x：必需。陰影水平方向的偏移量。 0，表示陰影在元素後面；正值，表示陰影在元素右邊?；負值，表示陰影在元素左邊?
offset-y：必需。陰影垂直方向的偏移量。 0，表示陰影在元素後面；正值，表示陰影在元素下邊☟；負值，表示陰影在元素上邊☝
blur-radius：可選。陰影的模糊距離。不允許為負值。如果值為0，則陰影的邊緣清晰，否則，值越大，陰影的邊緣越模糊。
spread-radius：可選。預設為0，此時陰影與元素同樣大；正直，陰影向各個方向延伸擴大；負值，陰影沿相反方向縮小。
color：可選。如果沒有指定，使用瀏覽器預設顏色--通常是color屬性的值。
舉個例子
注意：以下例子不是截圖
正常情況
<p style='width:80%; border: 1px solid #ccc; box-shadow:15px 5px blue'>css陰影</p>
css陰影 box-shadow:15px 5px blue
<p style='width:80%; border: 1px solid #ccc; box-shadow:15px 5px 10px blue'>css陰影</p>
css陰影 box-shadow:15px 5px 10px blue
<p style='width:80%; border: 1px solid #ccc; box-shadow:15px 5px 10px 5px blue'>css陰影</p>
css陰影 box-shadow:15px 5px 10px 5px blue
<p style='width:80%; border: 1px solid #ccc; box-shadow:15px 5px 0px 5px blue'>css陰影</p>
css陰影 box-shadow:15px 5px 0px 5px blue
負值 (blur-radius不允許為負值，其他三個可以)
<p style='width:80%; border: 1px solid #ccc; box-shadow:15px -5px blue'>css陰影</p>
css陰影 box-shadow:15px -5px blue
<p style='width:80%; border: 1px solid #ccc; box-shadow:-15px -5px blue'>css陰影</p>
css陰影 box-shadow:-15px -5px blue
<p style='width:80%; border: 1px solid #ccc; box-shadow:-15px 5px blue'>css陰影</p>
css陰影 box-shadow:-15px 5px blue
<p style='width:80%; border: 1px solid #ccc; box-shadow:15px 5px 10px -5px blue'>css陰影</p>
css陰影 box-shadow:15px 5px 10px -5px blue
<p style='width:80%; border: 1px solid #ccc; box-shadow:15px 5px 0px -5px blue'>css陰影</p>
css陰影 box-shadow:15px 5px 0px -5px blue
inset 內陰影
<p style='width:80%; border: 1px solid #ccc; box-shadow:inset 15px 5px blue'>css陰影</p>
css陰影 box-shadow:inset 15px 5px blue
<p style='width:80%; border: 1px solid #ccc; box-shadow:inset 15px 5px 10px blue'>css陰影</p>
css陰影 box-shadow:inset 15px 5px 10px blue
<p style='width:80%; border: 1px solid #ccc; box-shadow:inset 15px 5px 10px 5px blue'>css陰影</p>
css陰影 box-shadow:inset 15px 5px 10px 5px blue
<p style='width:80%; border: 1px solid #ccc; box-shadow:inset 15px 5px 0px 5px blue'>css陰影</p>
css陰影 box-shadow:inset 15px 5px 0px 5px blue
多個陰影
多個陰影，寫在前面的權重大，陰影重合部分權重大的值在上面。
<p style='width:80%; border: 1px solid #ccc; box-shadow:15px 5px blue, -15px -5px red'>css陰影</p>
css陰影 box-shadow:15px 5px blue, -15px -5px red
<p style='width:80%; border: 1px solid #ccc; box-shadow:15px 0px 10px blue, -15px 0px 10px red, 0px 5px 10px yellow, 0px -5px 10px green '>css陰影</p>
css陰影 box-shadow:15px 0px 10px blue, -15px 0px 10px red, 0px 5px 10px yellow, 0px -5px 10px green
<p style='width:80%; border: 1px solid #ccc; box-shadow:-15px -5px red inset,inset 15px 5px blue'>css陰影</p>
css陰影 box-shadow:-15px -5px red inset,inset 15px 5px blue
<p style='width:80%; border: 1px solid #ccc; box-shadow:inset 15px 0px 10px blue, inset -15px 0px 10px red, inset 0px 5px 10px yellow, 0px -5px 10px green inset '>css陰影</p>
css陰影 box-shadow:inset 15px 0px 10px blue, inset -15px 0px 10px red, inset 0px 5px 10px yellow, 0px -5px 10px green inset
線上生成陰影值
1：F12
總結
以上，基本用法已經會了。更復雜的情景，理解了應該很好寫出來。
在翻閱資料的時候，還看到了另一個屬性 filter:drop-shadow，也表示陰影，但是有區別。
CSS3 filter:drop-shadow濾鏡與box-shadow區別應用