如何在 CSS 中取得 Box Shadow（含視覺化產生器）

CSS 盒狀陰影是由 box-shadow 屬性產生,其格式為 box-shadow: offset-x offset-y blur-radius spread-radius color,並可搭配選用的 inset 關鍵字,將陰影從元素外部翻轉到內部。MDN 參考資料將這六個值列為完整的參數集合,且同一份來源也指出任何省略的長度值會預設為零,而顏色則預設為目前的文字顏色。由於每個值都是長度或顏色,相同的數值輸入必定產生相同的宣告,這正是視覺化產生器可靠的原因:你複製的字串就是瀏覽器將解析的精確字串。

透過在空白的樣式表中輸入數值來設計陰影雖然可行,但會拖慢你的速度。你必須存檔、重新載入並檢查才能看到結果,而且像是把模糊和擴散值調換這類小錯誤,會在無聲無息中改變外觀。一個專門打造的視覺化產生器會將所有控制項同時顯示在畫面上,並即時更新範例卡片和宣告。CSS Box Shadow Generator 正是採用這種模式:它將輸入限制在有效範圍內,在控制項旁顯示渲染結果,並提供一個可直接複製、與所見一致的宣告。如果你想以最快的速度從想法走到可運作的程式碼,請開啟 CSS Box Shadow Generator,並把畫面上的卡片視為唯一真實來源。

CSS Box Shadow 屬性可接受哪些值

CSS 的 box-shadow 屬性在單一宣告中最多可接受六項資訊。前兩項是必要的長度值:水平偏移和垂直偏移,單位可使用任何 CSS 長度單位,例如 px、rem 或 em。正值會將陰影向右、向下移動;負值則向左、向上移動。第三個值是模糊半徑,用來柔化陰影邊緣。第四個值是擴散半徑,可獨立於模糊之外擴大或收縮陰影的大小。第五個是顏色,可使用任何有效的 CSS 顏色格式,包括十六進位、rgb()、rgba()、hsl() 和具名顏色。第六個是選用的 inset 關鍵字,會將陰影從元素邊框盒的外部移至內部。

參數	是否必要	接受的值	效果
水平偏移	是	長度 (px、rem、em)	將陰影向左或向右移動
垂直偏移	是	長度 (px、rem、em)	將陰影向上或向下移動
模糊半徑	否	長度 (零或正數)	柔化陰影邊緣
擴散半徑	否	長度 (正數或負數)	放大或縮小陰影區域
顏色	否	任何有效的 CSS 顏色	設定陰影的色調
inset	否	關鍵字	在元素內部繪製陰影

根據 W3C 網站上維護的 CSS Backgrounds and Borders 規範,這些參數也可以透過逗號分隔的清單組合,在單一元素上堆疊多個陰影,第一個陰影會渲染在最上層。

如何使用產生器在 CSS 中取得盒狀陰影

在瀏覽器中開啟 CSS Box Shadow Generator。範例卡片與即時宣告會同時顯示,讓你在每一步都能進行比對。
設定水平偏移以將陰影向左或向右移動,設定垂直偏移以將其向上或向下移動。請保持在顯示範圍內,以避免瀏覽器裁切或拒絕該值。
調整模糊半徑以控制邊緣的柔和度,接著調整擴散半徑以放大或縮小陰影的覆蓋範圍。擴散值為零時,陰影大小等同於元素;正值會向外擴張;負值則會向內收縮。
使用挑選器選擇顏色,或貼上十六進位、rgb() 或 hsl() 值。利用不透明度控制項調整透明度,而無需改變基底顏色,如此可在不同主題間維持相同的色相。
切換 inset 選項,將陰影從元素外部翻轉到內部。這是唯一的關鍵字參數,新增或移除都不會影響宣告的其他部分。
閱讀範例卡片下方的生成宣告。當你變更任何控制項時,該字串會即時更新,因此你所見即瀏覽器將解析的內容。
將宣告複製到目標元件的 CSS 規則中,接著在多個主題、尺寸、焦點狀態和瀏覽器上測試實際的元件。

閱讀並複製產生的宣告

產生器的輸出就是完整的 box-shadow 值,當啟用 inset 選項時會包含 inset 關鍵字。一個典型的宣告看起來像 box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);,其中四個長度值依序為 offset-x、offset-y、blur-radius、spread-radius。複製時,請將該值直接貼在選取器中屬性名稱和冒號之後,例如 .card { box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15); }。瀏覽器由左至右解析宣告,並依據元素的座標系統解析每個長度,因此順序很重要,而在較舊的語法中,單位並非可互換。

由於產生器會維持在其宣告的限制之內,因此每個輸出都是符合標準的宣告。這表示你可以將其直接貼到任何現代樣式表中,無需加上廠商前綴;目前所有主要引擎都已將 box-shadow 視為單一無前綴的屬性來提供支援。如果你維護的是仍針對舊版 WebKit 或 Gecko 的舊樣式表,可以保留前綴版本作為後備,讓無前綴的規則在較新的瀏覽器中覆寫它們。

調整各項控制項以呈現逼真的陰影

從偏移開始。中性的浮起感受來自相等的水平和垂直偏移;而有方向性的光源感受則來自較大的垂直偏移搭配較小的水平偏移。垂直偏移是深度最強烈的訊號,因為它會與陰影顏色共同暗示卡片上方與後方的光源。在預設縮放等級下,多數 UI 浮起效果使用介於 2px 與 12px 之間的垂直偏移會有良好的視覺效果。

接著設定模糊值。模糊會柔化邊緣,使陰影看起來像是投射在某個表面上,而不是印在元素上。模糊值越高,元素與表面之間的視覺距離就越大。擴散則控制覆蓋範圍:正值讓陰影超出元素邊框向外擴張;負值則將其向內拉回。對於卡片類型的元件來說,擴散為零搭配適中的模糊通常看起來最為乾淨。

顏色選擇決定了陰影的大部分氛圍。低不透明度的中性暗色會呈現出細微的浮起感,而飽和的色相則可以表現出發光效果。環境陰影請保持低不透明度,只有當你想要明確的光暈效果時才提高。若想快速參考產生器所輸出的參數形狀,MDN 上關於 box-shadow 的條目列出了相同的六個值,並展示了多個陰影如何以逗號組合。

在單一元素上堆疊多個陰影

CSS 允許在單一元素上使用多個陰影,只需以逗號分隔各個宣告即可。瀏覽器會依原始碼順序繪製,第一個陰影會顯示在其他陰影之上。一個常見技巧是將緊貼元素、顏色較深的陰影與距離較遠、較柔和的淺色陰影搭配,以模擬真實世界中的環境光與主要照明。產生器所宣告的限制一次只涵蓋單一陰影,因此當你想要兩層時,請先生成第一個宣告並複製,接著調整控制項以產生第二個陰影並複製它,然後依想要的堆疊順序,以逗號分隔貼入同一個 box-shadow 值中。

雙重陰影宣告對於凸起的卡片、模態框和彈出視窗特別有用。第一個陰影提供銳利且貼近的接觸線;第二個則提供較柔和的環境衰減。最終效果看起來會像實體的深度,而不是單一的平面投影。請將兩種顏色保持在同一個色系中,讓分層效果顯得刻意而非突兀。

跨瀏覽器、主題與狀態測試陰影

將宣告貼入樣式表後,請在實際元件而非產生器的預覽中驗證結果。預覽使用的是瀏覽器將解析的同一個屬性,因此視覺上應該相當接近,但你的元件可能位於不同的背景、不同的容器寬度中,或與相鄰元素互動而改變了感知對比。請至少在一個以 Chromium 為基礎的瀏覽器和一個以 WebKit 為基礎的瀏覽器上開啟頁面,並分別在窄寬與寬廣的視窗寬度下檢查。

當你使用帶顏色的陰影時,主題支援就很重要。深色主題通常需要比淺色主題更柔和、低不透明度的陰影,而高對比主題可能需要一個幾乎看不見的陰影。如果你的專案同時支援兩者,請為每個主題重新產生陰影,或使用支援主題的選取器來限定該規則。由於宣告是確定性的,相同的產生器輸入必定產生相同的字串,因此你可以將兩個主題變體儲存為具名值。

焦點與 hover 狀態也會改變陰影應該呈現的感覺。一個常見模式是在 hover 時稍微放大模糊和垂直偏移,以暗示元件被抬起,接著在 focus-visible 時縮小,以凸顯鍵盤外框而不至於蓋過陰影。由於產生器的輸出是單一的 box-shadow 值,你可以在 :hover 或 :focus-visible 規則中直接替換它,而無需更動元件其餘的 CSS。

常見陷阱與產生器如何協助避免

一個常見的錯誤是使用負的模糊值,而根據 CSS 規範這會被限制為零。產生器的模糊控制項已設定邊界,因此這個錯誤根本不可能發生在輸出中。另一個陷阱是在零值長度上省略單位;沒有單位的 0 在 CSS 中是有效的,但在同一宣告中混用無單位與帶單位的長度,可能會讓手寫程式碼產生混淆。產生器永遠輸出一致的單位,因此複製出來的字串可直接原樣貼上。

第三個陷阱是使用與其餘調色盤不符的具名顏色。產生器中的挑選器會在範例卡片旁顯示所選的顏色,因此在複製之前就能看到結果。最後,不要依賴 box-shadow 來達到對可及性至關重要的強調效果:根據 W3C 的 CSS Backgrounds and Borders 指引,陰影僅為裝飾用途,相同效果可以透過可見的邊框或焦點外框來強化,以便低對比視力的使用者仍能看到元件狀態。如果你在打造像按鈕這樣的相關元件,CSS Button Generator 與此工作流程搭配良好,因為它能在一處同時協調按鈕的陰影、顏色、邊框和圓角。

Putting It Together

The path from blank stylesheet to working shadow is short: tune the six parameters inside the generator, read the declaration, copy it, and paste it into the selector that targets your component. The generator constrains inputs to valid ranges, so what you see is what the browser will render, and what you copy is what the browser will parse. Once the rule is in place, test the real component across themes, sizes, focus states, and browsers to confirm the shadow holds up in context. The same approach works whether you are styling a single card, a popover, or an entire design system, and the deterministic output keeps your values reproducible across components and teammates.