正在準備工作區…
輸入
正在準備工作區…
輸出
結果將顯示在這裡。
使用方法
- 設定水平位移、垂直位移、模糊和擴散。
- 選擇顏色與不透明度，視需要啟用「內陰影」。
- 檢查預覽，然後選擇「複製 CSS」。
建立盒陰影
盒陰影可以讓卡片與背景區分開，也能表現內凹表面。只需調整少量數值，不需製作圖片。
調整幾何參數與顏色時，預覽持續顯示陰影。圓角控制便於比較形狀，但不會向複製結果添加無關宣告。
位移、模糊與擴散
水平和垂直位移決定陰影相對元素的位置。負值向左或向上，正值向右或向下移動。
模糊會柔化邊緣，不能為負值。擴散改變陰影的範圍，負值收縮，正值擴大。
輸入
0px 8px 24px 0px, black at 15%結果
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.15);單層外陰影：向下位移 8px，模糊 24px，黑色不透明度 15%。
顏色與內陰影
取色器設定陰影顏色，不透明度控制 Alpha 值。較低的不透明度會讓更多頁面背景透出來。
「內陰影」將陰影移至盒子內部。工具僅產生一層陰影，多層陰影需在樣式表中用逗號分隔。
使用 CSS
「複製 CSS」僅匯出 box-shadow:。若需要與預覽相同的圓角，請為元素單獨設定 border-radius。
處理限制
文字輸入上限 1 MiB。CSS 與 HTML 轉換在工作執行緒中執行，限時 30 秒。顏色工具使用 sRGB；產生的樣式僅供預覽，需要在您的版面配置中測試。
延伸閱讀MDN · box-shadow
?
常見問題
預覽圓角會包含在 CSS 中嗎？
不會。圓角僅影響預覽。如需相同形狀，請單獨添加 border-radius 宣告。
模糊與擴散有什麼區別？
模糊柔化陰影邊緣；擴散在模糊之前擴大或縮小陰影範圍。
擴散可以為負值嗎？
可以。負擴散會縮小陰影；模糊必須為零或正值。
可以建立內陰影嗎？
可以。啟用「內陰影」，複製的宣告就會包含 inset 關鍵字。
支援多層陰影嗎？
工具僅產生一層。可在樣式表中將複製的值與其他陰影用逗號組合。