盒陰影產生器運作原理與參數解析
CSS 的 box-shadow 屬性由多個數值共同控制，用以模擬光線照射實體物件時產生的投影效果。本工具提供直觀的控制介面，讓設計人員與前端開發人員透過滑桿調整各項參數，即時預覽並產生對應的 CSS 程式碼。
在設定陰影時，各個參數的具體物理意義如下：
- 水平偏移：控制陰影在水平方向的位移。滑桿範圍為 -50px 至 50px。正值會將陰影向右移動，負值則向左移動。
- 垂直偏移：控制陰影在垂直方向的位移。滑桿範圍為 -50px 至 50px。正值會將陰影向下移動，負值則向上移動。
- 模糊（Blur）：控制陰影邊緣的柔和度。滑桿範圍為 0px 至 100px。數值為 0px 時陰影邊緣完全銳利，數值越大邊緣越模糊擴散。
- 擴散：在陰影開始模糊之前，控制其整體尺寸的擴張或收縮。滑桿範圍為 -50px 至 50px。正值會向外擴大陰影，負值則會將陰影往內收縮。
- 陰影顏色與不透明度：透過色彩選擇器與透明度滑桿，定義陰影的色彩與透光程度，以配合網頁整體的配色與背景深淺。
內嵌陰影與外側陰影的視覺差異
預設情況下，CSS 陰影屬於外側陰影，模擬物件漂浮在背景上方、向後方投射光線的效果，常用於建立「懸浮卡片」或「浮雕按鈕」等具有高度感的 UI 元素。
當啟用內嵌陰影切換開關時，陰影的渲染方向會翻轉至元素的內側。這種設定會使元素看起來向內凹陷，適合用於設計「按下的按鈕」、「凹陷的輸入框」或需要呈現深度感的容器。
多層陰影疊加的立體感設計
在真實物理世界中，單一光源產生的陰影往往伴隨著多個層次的漸變。單一的 CSS 陰影層若尺寸過大，容易顯得生硬且不自然。透過疊加多個陰影圖層，可以調配出極具真實感與立體感的視覺效果。
本工具預先渲染了五個圖層，其中第一層的預設數值為 0 8 24 -4，搭配 18% 不透明度的黑色，其餘四層初始狀態為隱藏。使用者可以點擊新增圖層按鈕建立具有預設值的新陰影層，或點擊移除圖層刪除選定的圖層。
當存在多個陰影圖層時，產生的 CSS 程式碼會自動將各層數值以逗號分隔輸出。例如，將貼近元素邊緣的深色緊湊陰影，與外圍寬廣、低不透明度的柔和陰影相互疊加，即可創造出細緻的環境光遮蔽（Ambient Occlusion）效果。
瀏覽器本機處理與隱私說明
本工具重視使用者的資料隱私。每一層陰影都在你的瀏覽器裏繪製，這裡設定的內容不會上傳到 BroBroGo。所有的參數調整、即時預覽以及 CSS 程式碼產生，均完全在使用者本機的瀏覽器環境內執行。
常見問題
偏移、模糊、擴散這幾個值分別控制甚麼？
偏移決定陰影往哪個方向移動，模糊讓邊緣變柔和，擴散則在模糊之前把陰影撐大或收縮。擴散設成負值能讓陰影往內縮，適合做貼合邊緣的緊湊陰影。
內嵌（inset）選項是做甚麼的？
一般陰影落在元素外側，像卡片抬起時背後透出的光。打開內嵌後陰影會翻到元素內側，讓元素看起來像被按下去一樣，適合做凹陷的輸入框或按下狀態的按鈕。
為什麼要疊加不只一層陰影？
尺寸大一點，單層陰影看起來就會很平。真正有立體感的效果通常是一層貼近、深色的陰影，疊加一層柔和、範圍更大的陰影——加一層新的，分別調整兩層的數值就能做出來。