文章將陸續整理並更新至個人部落格。

box-shadow 通常像是個可有可無的角色，但其實他也可以變出好玩的花樣，在展現影分身之術前，還是先來打個基本功，熟悉一下 box-shadow 的特性吧！

box-shadow 特性

• 不會影響佈局，僅會與元素或其他陰影產生重疊。

• 不會觸發或影響視窗滾動條。

• 依據元素的 border 形狀繪製，若元素設有 border-radius，陰影也將繪製出相同形狀，但不受 border-image 屬性影響。

• 以圖層來看，外陰影在元素背景(background)下層 ; 內陰影在元素背景(background)上層，但在邊框(border)與內容(content)下層。
  

圖片來源：W3C

• 一個元素使用多層陰影時，在語法上排序在愈前面的陰影其 z-index 值越大，依次遞減，故排序在後的陰影視覺上會被遮蓋住。
  

box-shadow 語法：

box-shadow : offset-x | offset-y | blur-radius | spread-distance | color | inset

在解釋每個值的意義之前，須注意的是，別把 X、Y軸與數學上所習慣的座標軸搞混囉！

如下圖:

offset-x

陰影在水平方向(X軸)的偏移量。

• 正值 ⇒ 陰影向右偏移
• 負值 ⇒ 陰影向左偏移

offset-y

陰影在垂直方向(Y軸)的偏移量。

• 正值 ⇒ 陰影向下偏移
• 負值 ⇒ 陰影向上偏移

blur-radius

模糊效果的範圍。

• 此值越大，模糊越大，陰影也會有變大的效果
• 不允許使用負值，如果未指定則為 0

spread-radius

調整陰影大小。

• 正值 ⇒ 使陰影放大，若同時有 blur-radius 值，則陰影會先延伸再模糊
• 負值 ⇒ 使陰影縮小
• 若未指定則為 0

color

顏色。

• 若無指定，則取決於瀏覽器。

inset

內陰影。

• 加在 box-shadow 語法的最前面或最後面。
• 若無指定，則為外陰影。

多層陰影

以逗號隔開，亦可同時設定多層外陰影與內陰影。

瞭解完 box-shadow 的語法與特性後，下一篇就來看看 box-shadow 還能夠玩出什麼花樣吧！

參考資料

W3C-Miscellaneous Effects
W3C-Painting order
MDN-box-shadow