Box Shadow 產生器
免費線上 CSS 陰影產生工具,支援即時預覽
CSS box-shadow 語法
box-shadow CSS 屬性為元素添加陰影效果。語法:box-shadow: [inset] offset-x offset-y blur spread color。多個陰影可以用逗號分隔。使用視覺化編輯器調整數值並即時查看結果。
如何使用盒陰影產生器
調整偏移 X、偏移 Y、模糊半徑和擴展半徑的滑塊。選擇陰影顏色並切換內陰影選項。產生的 CSS 程式碼即時更新,可以複製到剪貼簿。
▶模糊和擴展有什麼區別?
模糊控制陰影邊緣的柔和程度(0 = 銳利邊緣,值越高越柔和)。擴展在所有方向上擴大或縮小陰影。正擴展使陰影比元素更大。
▶可以添加多個陰影嗎?
可以,CSS 支援用逗號分隔的多個陰影:box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);。組合微妙陰影可以獲得更真實的深度效果。
▶內陰影是什麼效果?
內陰影出現在元素內部而非外部。它建立元素向內凹陷的效果,如文字輸入框或按鈕的凹陷感。