使用方式
- 從預設樣式開始，或調整第一個圖層的偏移、模糊、擴散、顏色和透明度。
- 增加圖層，打造更自然的立體感；或勾選「內陰影」來套用內部陰影。
- 調整預覽背景和方框顏色以符合您的設計，然後複製 CSS。
運作方式
box-shadow 每個陰影圖層可設定：水平偏移、垂直偏移、模糊半徑、擴散半徑和顏色，也可以在前面加上 inset。正值會讓陰影向右、向下移動。模糊可柔化陰影邊緣，且不可為負值；擴散則會在模糊前放大（正值）或縮小（負值）陰影。多個圖層以逗號分隔，第一個圖層會繪製在最上方。
自然的立體效果通常會結合小而明確的陰影，以及較大、較柔和且透明度較低的陰影；「立體」預設樣式就是採用這種做法。顏色以 rgba() 表示，讓透明度一目了然。陰影會配合元素的 border-radius，不會占用版面空間，因此不會推動其他元素。
如果許多元素都使用非常大的模糊值，低階手機上的捲動速度可能會變慢。如果要製作陰影動畫，通常讓已帶有陰影的偽元素淡入，會比直接為 box-shadow 加上動畫更流暢。
範例
淺色頁面上的卡片
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 8px 24px -4px rgba(0, 0, 0, 0.18); 可讓卡片邊緣清晰，同時呈現柔和的浮起效果。
不影響版面的焦點環
在品牌色中使用一個偏移量為 0、模糊值為 0、擴散值為 3px 的圖層，可在按鈕周圍繪製實心圓環。與 border 不同，它不會改變元素大小。
按下狀態的輸入欄位
inset 0 2px 6px 0 rgba(0, 0, 0, 0.25) 可讓文字欄位看起來略微內凹。
常見問題
box-shadow 和 filter: drop-shadow() 有什麼不同？
box-shadow 會依照元素方框和 border-radius 繪製，並支援擴散和 inset。drop-shadow() 則會依照可見形狀繪製，包括 PNG 或 SVG 圖片的透明區域，但不支援擴散或 inset。
為什麼陰影被裁切了？
如果父元素設定了 overflow: hidden，超出方框的內容（包括陰影）都會被裁切。請在父元素加上內距，或移除 overflow 設定。
應該使用幾個圖層？
大多數介面使用一到兩個圖層就足夠。增加圖層可以讓陰影更平滑，但繪製成本也會稍微提高，長清單尤其需要注意。
隱私權
CSS 會在您的瀏覽器中產生，不會上傳或儲存任何資料。