CSS box-shadow 好看的實用技巧

核心原則

陰影服務於層次與真實感，而非單純裝飾。需與整體設計風格（扁平/拟物/材質）協調。

實用參數模板

/ * 柔和陰影（卡片） * /
box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);

/* 立體按鈕 */
box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
transform: translateY(-2px); /* 懸停上浮 */

/* 內陰影（輸入框聚焦） */
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);

/* 多層疊加（Material Design elevation） */
box-shadow: 
  0 1px 3px rgba(0,0,0,0.12), 
  0 1px 2px rgba(0,0,0,0.24); /* elevation 2 */

避坑指南

• 避免純黑高不透明度：rgba(0,0,0,0.5) 顯得髒，改用 rgba(0,0,0,0.1~0.2) 並疊加多層。
• 配合 border-radius：圓角元素陰影需匹配圓角，否則邊緣生硬。
• 性能：大範圍模糊（blur > 20px）會觸發 GPU 繪製開銷，移動端慎用。

參考資源

CSS3 box-shadow 詳細教程與實戰技巧