「批次」在單層 CSS 陰影產生器中的意義
一個一次只產生單一宣告的陰影產生器,仍然能支援批次工作流程:為你想要的每一層各執行一次,複製每個產生的字串,然後以逗號分隔的值貼進同一個選擇器。CSS Backgrounds and Borders Level 3 模型將 box-shadow 定義為以逗號分隔的陰影層清單,每層各自帶有可選的 inset 關鍵字、水平位移、垂直位移、模糊半徑、擴散半徑與顏色。因為產生器輸出的就是一條符合標準形狀的宣告,堆疊多個輸出就能維持該模型:瀏覽器由左至右讀取每一層,並把第一個項目畫在其餘項目之上。這在需要深度線索、分層發光、接觸陰影,或單層無法表達的內部高光加外部陰影組合時特別重要。這種做法把產生器視為一個具決定性的圖層建構器,而不是一次性的預覽工具,而且整個過程不需要將任何顏色、不透明度或 CSS 字串送到遠端服務。以「批次」為關鍵字搜尋而來的讀者,通常希望保有這種多層彈性,同時把視覺調整的步驟保留在本機瀏覽器中完成。
CSS Box Shadow Generator 每次僅建立一層,是因為刻意將多層的組合與排序排除在範圍之外。這個單層界線在你想要批次輸出時並不是限制,而是讓每一層都具決定性且可審查的機制。你可以重新進入產生器、修改一組輸入、複製新的宣告,然後附加到進行中的清單。由於每次執行都會以相同的欄位順序序列化——可選的 inset,接著水平位移、垂直位移、模糊半徑、擴散半徑,以及 alpha 四捨五入到小數第三位的 rgba 顏色——串接字串是字面上的接合,而不是重新格式化。為了建立可運作的心智模型,可以想像一個柔和的環境光暈、加上一個更緊的關鍵陰影、再加上一個內凹的按下高光:每一個都在各自的階段中調整,然後組合起來。同一套模式也適用於邊緣光、讀起來像發光的焦點環,以及需要同時具備接觸與環境訊號的堆疊卡片高度。
輸入、範圍與產生器輸出的決定性順序
每次執行都會顯示相同的控制項,並將它們限制在固定的範圍內,因此你產生的每一層都遵循同一套規則。水平與垂直位移接受 -200 到 200 像素的值。正的水平值會把外部陰影推向右側,負值則推向左側;垂直位移也適用相同的正負號慣例,正值使陰影向下移動,負值則向上移動。在內凹陰影中,這些位移會相對於可見的內邊緣反轉方向。模糊半徑的範圍是 0 到 200 像素,永遠不會是負值。零會產生硬邊緣,較大的值則讓可見的過渡變得柔和,而不改變明確的擴散值。擴散半徑的範圍是 -100 到 100 像素。正的擴散會在套用模糊之前放大陰影形狀,負的擴散則會將其收縮;足夠負的擴散可以讓外部陰影完全消失。顏色接受六位數十六進位值,產生器會將紅、綠、藍色通道轉為十進位的 rgba 分量。不透明度範圍是 0 到 100%,會被序列化為介於 0 與 1 之間的 alpha,最多四捨五入到小數第三位。alpha 為 0 的圖層會保留在字串中,但不會貢獻任何可見效果。inset 切換鈕會把外部投影陰影切換為繪製在元素邊框內側的陰影,適用於被按下的控制項、凹陷的面板,以及內部高光。
產生器寫入的精確欄位順序,是堆疊能夠順利運作的原因之一。序列化的宣告永遠是:可選的 inset、水平位移、垂直位移、模糊半徑、擴散半徑,以及 rgba 顏色。負零會被正規化,alpha 會被修剪到小數第三位,而且輸出中不會附加任何 style 標籤、HTML 片段、廠商前綴或 JavaScript。例如 box-shadow: 4px 8px 16px 0px rgba(0, 0, 0, 0.25); 這樣的純文字結果,就是單一層的完整產出。
| 控制項 | 範圍或格式 | 對陰影的影響 |
|---|---|---|
| 水平位移 | -200 到 200 像素 | 正值將外部陰影向右移,負值向左;inset 時方向相反 |
| 垂直位移 | -200 到 200 像素 | 正值將外部陰影向下移,負值向上;inset 時方向相反 |
| 模糊半徑 | 0 到 200 像素 | 零為硬邊;較大值會柔化邊緣而不改變擴散 |
| 擴散半徑 | -100 到 100 像素 | 正值在模糊前放大形狀;負值將其收縮 |
| 顏色 | 六位數十六進位 | 轉為十進位的 rgba 通道 |
| 不透明度 | 0 到 100% | 序列化為 0–1 的 alpha,四捨五入到小數第三位 |
| Inset | 切換鈕 | 外部投影陰影或內部邊框邊緣陰影 |
一步步建立多層陰影
- 在瀏覽器中開啟 CSS Box Shadow Generator,並決定第一層的角色——例如,卡片背後一個低不透明度的環境光暈。
- 在顯示的範圍內調整水平與垂直位移、模糊、擴散、顏色、不透明度以及 inset 選項,同時觀察範例卡片在本機更新。
- 讀取預覽下方顯示的精確產生宣告,在暫存筆記中標記該層的角色,然後將字串複製到剪貼簿。
- 重新開啟產生器或在原地調整控制項,產生第二層,每次只改變一個邏輯屬性。保持模糊大於位移,並從零或小的擴散開始。
- 重複直到你獲得所有需要的圖層——環境、關鍵、邊緣、焦點發光、被按下的 inset——每一個都由各自的決定性字串代表。
- 將字串以逗號分隔的清單形式貼進目標選擇器,希望顯示在最上方的圖層放在最前面。
- 在主題、尺寸、焦點狀態、停用狀態,以及目標受眾使用的瀏覽器中,對實際元件進行測試,再出貨樣式表。
在產生每一層時為其加上標記,可以防止兩個幾乎相同的字串在最終規則中被調換。由於輸出是純文字,而且順序固定,你可以把每個帶有標記的字串貼進清單,並依你希望它們被渲染的順序讀回來。如何以視覺化方式在 CSS 中製作陰影指南更深入地介紹了相同的單層流程;執行多次並接合字串,就是這個關鍵字所暗示的批次延伸。
將多個輸出合併為單一逗號分隔的宣告
接合字串是一個機械化的步驟。想像產生器三次執行後產生了下列帶有標記的字串:
- 環境:box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.12);
- 關鍵:box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.18);
- 按下的 inset:box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.20);
因為每一行結尾都已經有分號,你只需在最後一個項目保留分號,其他項目之間以逗號分隔,然後把合併後的結果套用到你的選擇器:
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.18), inset 0px 1px 2px 0px rgba(0, 0, 0, 0.20);
瀏覽器由左至右讀取圖層,並把第一個項目畫在最上方,所以環境光暈會渲染在較緊的關鍵陰影之上,而 inset 高光則位於兩者之後。順序很重要:如果你希望 inset 在視覺上最為突出,就把它移到清單的開頭;如果它只是作為淡的內部線索,就把它推到清單末端。
這個組合步驟是你唯一可能想引入產生器不會輸出之內容的地方。堅持使用工具產生的純字串:不要加 -webkit- 或 -moz- 前綴、不要跑 autoprefixer、不要使用 text-shadow、不要使用 filter: drop-shadow(),也不要替換成設計系統或 Tailwind 的 token。現代瀏覽器會渲染未加前綴的 box-shadow 屬性,合併後的宣告會自然繼承這份支援,不需要額外處理。
跨主題、尺寸與無障礙驗證堆疊的陰影
一旦合併後的值進入你的樣式表,產生器就不再介入,真正的環境接手。瀏覽器的渲染會因像素密度、變形、縮放、合成以及元素的形狀而略有不同,因此在方形範例卡片上看起來平衡的值,在高聳的按鈕上可能顯得偏重,在寬廣的英雄區塊上又可能顯得偏軟。請在元件出貨時的最小與最大尺寸下檢查元素,並確認最底層讀起來仍然是環境光暈,而不是一團模糊。
主題與無障礙檢查很重要,因為陰影在堆疊時可能會降低對比,或製造出錯誤的視覺層級。請將合併後的宣告與淺色、深色與高對比主題進行比較。檢查焦點與停用狀態;由帶色圖層構成的焦點發光,在顏色相近的焦點環上可能會消失,而 inset 的按下線索則可能與停用狀態的顏色處理互相衝突。當使用者偏好降低透明度時,低不透明度的環境圖層可能會完全看不見,因此請準備一個備用的背景變化。陰影應該強化結構,而不是單獨承擔必要的意義——一個只靠陰影標示的按鈕,在強烈陽光下沒有人能讀懂。
最後,請維持單層步驟中已經鼓勵的輸入衛生習慣。從適度的位移開始,模糊大於位移,擴散為零或較小,不透明度低。將每一層在接近目的地的背景下預覽,複製 CSS,放入目標規則中,並在實際元件上檢查合併後的值。產生器不會在重新載入之間保存設定,因此在你準備出貨樣式表之前,請把帶有標記的清單保存在可靠的地方。這份紀律能把一個單層視覺工具,變成一個具決定性的批次建構器,而不需要將任何顏色、不透明度或 CSS 字串送到你的機器之外。