Box Shadow Generator

關於本工具

水平 — 正值向右移動陰影，負值向左移動。垂直 — 正值向下移動，負值向上移動。模糊 — 值越大陰影越柔和擴散。擴展 — 正值擴大陰影，負值縮小陰影。

啟用內嵌可建立內部陰影。點擊「+ 新增陰影」新增多個陰影——它們在 CSS 輸出中以逗號分隔，從前到後疊加。

使用方法

1. 調整水平和垂直滑桿設定陰影偏移量。
2. 增大模糊值取得柔和陰影，設為 0 取得硬邊陰影。
3. 使用擴展在元素邊界外擴大或縮小陰影。
4. 點擊「+ 新增陰影」疊加多個陰影取得更豐富的效果。

使用情境

設計師使用 box-shadow 為卡片 UI 元件增加深度和層次感。內嵌陰影可為按鈕建立按下或凹陷效果。多層陰影能以環境光和主光產生逼真的光照效果。

常見問題

• inset 選項是什麼？ — inset 陰影出現在元素邊框內部而非外部，適合為輸入框和按鈕建立按下效果。
• 可以新增多個陰影嗎？ — 可以。點擊「+ 新增陰影」新增陰影層。所有陰影合併為一個逗號分隔的 box-shadow 宣告。
• 負擴展值有什麼作用？ — 負擴展使陰影比元素更小。與偏移和模糊組合，可建立僅從一側微微露出的微妙陰影。