UI設計圖中常會出現陰影的效果，所以需要記住box-shadow對應的引數代表的含義。
box-shadow 由逗號分割的列表來描述一個或多個陰影效果。該屬性可以讓幾乎所有元素的邊框產生陰影。如果元素同時設定了
box-radius，陰影也會有圓角效果。多個陰影的z-ordering（第一個陰影在最上面）【1】。
下面是box-shadow的樣式例子【2】：
.shadow{
-moz-box-shadow: 3px 2px 5px 6px #ccc;
-webkit-box-shadow: 3px 2px 5px 6px #ccc;
box-shadow: 3px 2px 5px 6px #ccc;
}
複製程式碼- X偏移量：正偏移陰影位於盒子（box）的右側，負偏移表示陰影位於盒子（box）的左側
- Y偏移量：負偏移量陰影位於盒子的上方，正偏移量陰影位於盒子的下方
- 模糊半徑的大小（可選）：預設為0值時陰影是銳利的（sharp），數字越大，越模糊。
- 擴充套件半徑的大小（可選）：正值會增加陰影的大小，負值會減小陰影的大小。預設值為0（陰影與模糊大小相同 ）
- 顏色值
- inset (可選) 使用inset後陰影在邊框內，陰影向內擴散，背景之上內容之下
box-shadow: 60px -16px red;
box-shadow: 10px 5px 5px red;
box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.2);
box-shadow:inset 5em 1em gold;
box-shadow:3px 3px red,-1em 0 0.4em black;
複製程式碼