單一 CSS box-shadow 宣告結合了六個有序的值 — 選擇性的 inset、水平偏移、垂直偏移、模糊半徑、擴散半徑，以及一個 rgba 顏色 — 而這個視覺化的 CSS Box Shadow Generator 把每一個值都呈現為一個即時控制項,讓你在變更輸入的瞬間,宣告也跟著更新。以視覺化方式作業,可以消除死記 spread 該在 color 之前還是之後、怎樣才算有效的模糊範圍、以及為何 inset 陰影看起來方向不對等猜測工作。工具中的每個控制項都對應到 W3C 和 MDN 文件所記載的官方 CSS Backgrounds and Borders box-shadow 元件模型中的某個位置,因此預覽卡片所顯示的內容,就是現代瀏覽器在套用這條規則時會實際呈現的結果。產生的輸出是可以直接貼到任何樣式規則中的純文字,不含 stylesheet 標籤、廠商前綴或輔助 HTML。這種滑桿與真實宣告之間的直接對應,是在各種元件、佈景主題和螢幕尺寸之間保持陰影一致性的最可靠方式,不必逐一手動測試每個值。
box-shadow 屬性實際的作用
CSS box-shadow 屬性會在一個元素的後方或內部繪製一個或多個陰影效果。依據 W3C CSS Backgrounds and Borders Level 3 規範以及 MDN 的 box-shadow 參考資料,每個陰影由一個選擇性的 inset 關鍵字、用於水平和垂直方向的兩個長度偏移、一個模糊半徑、一個選擇性的擴散半徑,以及一個顏色所組成。瀏覽器會將結果與元素的 border box 進行合成,因此陰影會沿著元素的形狀以及套用到該元素的任何 border-radius 一起呈現。
當省略 inset 時,陰影會繪製在元素 border 邊緣的外側,類似投影效果。當包含 inset 時,陰影會繪製在 border 邊緣的內側,這在按下的按鈕、凹陷的表單欄位、卡片上的內部高光,以及其他用來暗示深度但又不讓元素浮起的視覺提示上很有用。每個陰影也都接受一個顏色,而這個工具會把任何六位數十六進位顏色轉換成 rgba,讓你可以獨立調整 alpha 通道,而無需變動紅、綠、藍通道。
為何要用視覺化方式建立,而不是手動輸入值
手動輸入 box-shadow 宣告容易出錯,因為值的順序很重要、負偏移會反轉方向,而模糊與擴散之間的差別也很容易搞混。視覺化產生器透過明確的滑桿、拖曳時會即時更新的範例卡片,以及一個會立即反映所有變更的序列化字串,一次解決了所有這些問題。由於輸入值都有範圍限制 — 水平和垂直偏移從 -200 到 200 像素、模糊從 0 到 200 像素、擴散從 -100 到 100 像素 — 你不可能不小心輸入瀏覽器會以出乎意料方式解析的不支援值。
當外陰影太暗、擴散值讓可見範圍塌縮成零、或 inset 陰影被負偏移反轉時,預覽也會讓這些問題一目了然。瀏覽器在高像素密度、使用合成層,或套用 transform 的情況下,仍可能對同一個宣告呈現出略有不同的結果,但即時預覽能在數值進入你的樣式表之前,先凸顯出大多數的問題。此工具刻意保持範圍很窄 — 一次只處理一層有範圍限制的陰影 — 因此你在卡片上看到的內容,就是輸出字串所描述的唯一東西。
使用視覺化產生器製作 CSS box shadow
在瀏覽器分頁中開啟產生器。範例卡片置中顯示,而六個控制項則堆疊在它旁邊或下方。請依序依照下列步驟,從空白的預覽走到可複製的宣告。
- 拖曳水平偏移滑桿,直到陰影在預覽卡片上位於正確的方向。正值會把外陰影往右推;負值會把它往左推。
- 拖曳垂直偏移滑桿來設定陰影的高度。正值會把外陰影往下推;負值會把它往上推。
- 設定模糊半徑以柔化陰影邊緣。建議從一個大於最大偏移的值開始,讓邊緣能平滑羽化;設為零會產生硬邊。
- 只有在需要讓陰影範圍超出模糊範圍而擴大或縮小時,才設定擴散半徑。多數的卡片和按鈕讓它保持為零即可;浮動元素可以使用較小的正值;至於負的擴散請謹慎使用。
- 為陰影挑選一個六位數的十六進位顏色。像 #000000 這樣的黑色是安全的預設值,但同樣的做法也適用於品牌色面上的有色調陰影。
- 將不透明度從零調整到百分之百,以控制成為 rgba 第四個元件的 alpha 通道。
- 如果希望陰影繪製在 border 邊緣內側而非外側,請切換 inset 選項。
- 讀取顯示在預覽卡片下方的產生的宣告。它是以下列形式呈現的純文字:box-shadow: <offsets> <blur> <spread> rgba(r, g, b, a);。
- 複製這個宣告,貼到你要設定樣式之元素的 style 規則中,並在多種尺寸、淺色與深色主題下,以及在你的受眾所使用的瀏覽器之間進行測試。
產生的宣告各部分說明
box-shadow 字串看起來比實際長度還短。下面的範例就是產生器為典型的浮動卡片所產生的內容。
box-shadow: 4px 8px 16px 0px rgba(0, 0, 0, 0.25);
| 位置 | 名稱 | 範例值 | 控制項目 |
|---|---|---|---|
| 1 | 選擇性的 inset | (省略) | 預設為外陰影;inset 關鍵字會把陰影翻轉到 border 邊緣的內側 |
| 1 | 水平偏移 | 4px | 向右(正值)或向左(負值)的距離 |
| 2 | 垂直偏移 | 8px | 向下(正值)或向上(負值)的距離 |
| 3 | 模糊半徑 | 16px | 邊緣的柔和程度;零會產生硬邊 |
| 4 | 擴散半徑 | 0px | 在套用模糊之前,擴大或縮小陰影的形狀 |
| 5 | 顏色 | rgba(0, 0, 0, 0.25) | 轉換為 rgba 的六位數十六進位顏色,alpha 來自不透明度滑桿 |
順序由 CSS Backgrounds and Borders 規範所固定,因此任何符合標準的產生器,對於相同輸入都會產生相同的字串。此工具一律先寫選擇性的 inset,接著依序寫四個像素長度,最後是 rgba 顏色,而 alpha 最多四捨五入到小數點後三位。
產生器所強制執行的限制與範圍
工具中的每個控制項都有範圍限制,讓輸出保持在 CSS 可接受且不會發生意外解析的範圍內。了解這些限制有助於你在預覽不如預期時,判斷該移動哪個滑桿。
| 控制項 | 範圍 | 在邊界值時的效果 |
|---|---|---|
| 水平偏移 | -200 到 200 px | 超過 ±200 px 的值會把陰影移到大多數預覽區域之外 |
| 垂直偏移 | -200 到 200 px | 與水平偏移行為相同 |
| 模糊半徑 | 0 到 200 px | 模糊不能為負值;零會產生硬邊 |
| 擴散半徑 | -100 到 100 px | 足夠大的負擴散會讓陰影塌縮成看不見 |
| 不透明度 | 0 到 100% | 序列化為 alpha 0 到 1,四捨五入到小數點後三位 |
| Inset | 切換 | 把陰影從 border 邊緣的外側翻轉到內側 |
| 顏色 | 六位數十六進位 | 轉換為 rgba,各通道從 0 到 255 |
這些範圍與產生器的實作方法一致。如果設計需要超出這些範圍,該陰影通常會比較適合放在另一個元素上,而不是放在同一個 box-shadow 值中,因為 CSS 本身雖然能接受更大的數字,但視覺結果通常不太有用。
在實際元件上測試陰影
這個產生器不會修改專案檔案、不會執行 autoprefixer,也不會在重新載入後記住設定,因此確認陰影是否正確的唯一方法,就是把它貼到實際的規則中並檢視真正的元素。以下幾項檢查能在出貨前抓出大多數的問題。在與目的背景相似的背景上觀察該元素。在白色上看起來不錯的陰影,在雜亂的主視覺圖片上可能會消失;而在深色主題上,柔和的灰色陰影可能會顯得混濁。
也要檢查 disabled 和 focus 狀態,因為陰影在互動元素處於作用中狀態時,經常需要調整。如果你注重無障礙設計,請在啟用降低透明度和高對比的偏好設定下檢視結果;當透明度被降低時,低不透明度的陰影可能會完全消失。請觀察在小尺寸與大尺寸下的結果。在桌面卡片上看起來合適的相同像素值,在行動裝置按鈕上可能會顯得過大,在寬幅主視覺區塊上又可能會顯得太小。
過於戲劇化的陰影也可能會降低清晰度、讓元件看起來與頁面脫節,或是在不該出現的地方建立錯誤的層級關係,因此請用陰影來強化結構,而不是讓它單獨承擔意義。如需更深入的解說並聚焦於相同的視覺化工作流程,請參閱 使用視覺化產生器在 CSS 中取得 box shadow 的實用指南。當單一層不夠用時,請記得此工具一次只能產生一層陰影,因此組合並排列多個陰影,需要在你自己樣式表中以逗號分隔額外的宣告來手動完成。
如需更深入的探討,請參閱 如何用 CSS 和 HTML 製作按鈕:視覺化逐步說明。