盒陰影產生器運作原理與參數解析
CSS 的 box-shadow 屬性是網頁設計中建立視覺層次的重要工具。本工具提供直覺的滑桿介面，讓設計師與前端工程師能精確調整各項陰影參數，並即時預覽效果。
陰影的視覺外觀由以下核心參數共同決定：
- 水平偏移：控制陰影在水平方向的位移。滑桿範圍為 -50px 至 50px，正值將陰影向右移動，負值則向左移動。
- 垂直偏移：控制陰影在垂直方向的位移。滑桿範圍為 -50px 至 50px，正值將陰影向下移動，負值則向上移動。
- 模糊：控制陰影邊緣的柔和程度。範圍從 0px（邊緣完全銳利）至 100px（極度擴散且柔和）。
- 擴散：在陰影開始模糊之前，擴張或收縮陰影的尺寸。範圍為 -50px 至 50px。當設定為負值時，會將陰影往內收縮，適合用來消除邊角溢出的雜亂陰影。
- 陰影顏色與不透明度：透過色彩選擇器與不透明度滑桿，可調配出符合整體設計調性的陰影色彩與半透明效果。
內嵌陰影與外陰影的視覺差異
在預設情況下，陰影會投射在元素的外部，模擬光源照射下物體懸浮於背景上方的立體感。
當啟用內嵌陰影選項時，陰影的投射方向會翻轉至元素的內側。這種設定會改變視覺認知，使元素看起來不再是浮起的卡片，而是向內凹陷的區塊。此效果非常適合應用於需要呈現按壓狀態的按鈕，或是需要表現深度感的輸入框（Input）等 UI 元件。
疊加多個陰影圖層建立真實立體感
在現實世界中，單一光源很少產生單一且均勻的陰影。若僅使用單一層陰影，網頁元素往往顯得扁平且不自然。
本工具支援多圖層疊加功能：
- 預設配置：工具預載了五個圖層，其中第一層的預設值為
0 8 24 -4搭配 18% 不透明度的黑色，其餘四個圖層初始狀態為隱藏。 - 新增圖層：點擊後可建立一個帶有預設值的新陰影圖層。
- 移除圖層：可自由刪除選定的陰影圖層。
透過疊加多個圖層，您可以將一層緊湊、顏色較深的陰影（用於定義邊界），與另一層範圍較大、較為柔和的陰影（用於模擬環境光散射）結合，創造出極具深度與寫實感的精緻視覺效果。當存在多個圖層時，產生的 CSS 程式碼會自動以逗號分隔各組數值。
瀏覽器本機處理與隱私保護
本工具完全在您的用戶端瀏覽器中完成所有陰影的繪製與即時運算。每一層陰影都在你的瀏覽器裡繪製,這裡設定的內容不會上傳到 BroBroGo。您可以放心在開發流程中使用，無須擔心任何設定參數被傳輸至外部伺服器。
常見問題
偏移、模糊、擴散這幾個值分別控制什麼?
偏移決定陰影往哪個方向移動,模糊讓邊緣變柔和,擴散則在模糊之前把陰影撐大或收縮。擴散設成負值能讓陰影往內縮,適合做貼合邊緣的緊湊陰影。
內嵌(inset)選項是做什麼的?
一般陰影落在元素外側,像卡片抬起時背後透出的光。打開內嵌後陰影會翻到元素內側,讓元素看起來像被按下去一樣,適合做凹陷的輸入框或按下狀態的按鈕。
為什麼要疊加不只一層陰影?
尺寸大一點,單層陰影看起來就會很平。真正有立體感的效果通常是一層貼近、深色的陰影,疊加一層柔和、範圍更大的陰影——加一層新的,分別調整兩層的數值就能做出來。