任務路徑 / 從輸入到結果
如何建立 CSS 盒陰影
- 01
定位陰影
設定「水平偏移」和「垂直偏移」，範圍均為 -80 到 80 px。負值把陰影推向左側或上方；為零時陰影居中於卡片背後。初始值是向右 12 px、向下 18 px，是經典的投影位置。
- 02
調節模糊與擴散
把「模糊半徑」在 0 到 120 px 之間調整以控制柔和度（預設 32 px）；把「擴散半徑」在 -40 到 60 px 之間調整，在模糊之前放大或縮小陰影。預設的 -4 px 擴散會略微收緊陰影，讓邊緣更俐落。
- 03
設定顏色與不透明度
選擇六位的「陰影顏色」——預設的 #0b0d12 接近純黑——並把「陰影不透明度」以 0.01 為步進設在 0 到 1 之間。不透明度會成為輸出中 rgba() 顏色的 alpha 通道，因此 0.28 會渲染為 rgba(11, 13, 18, 0.28)。
- 04
切換內陰影模式
開啟「內陰影」把陰影移入盒內，看起來就像被按下或凹陷的表面——適合輸入框和切換態按鈕。開關打開時，產生的宣告會在最前面加上 inset 關鍵字。
- 05
與範例對比
點擊「載入範例」可得到一種銳利的參考樣式：兩軸各 8 px 偏移、無模糊無擴散、#0f4cff、不透明度 0.35，呈硬邊偏移描邊。「重設」恢復柔和的預設陰影；即時預覽隨每次修改重新渲染。
- 06
複製或下載 CSS
點擊「複製 CSS」複製 .shadow-card 規則，或點擊「下載 .css」儲存為 toolars-box-shadow.css。只要還有取值超出範圍，複製就會被阻止，因此你貼上的宣告始終是有效的。