每一個重複的 CSS 條紋圖樣，都遵循同一套算術:可見週期等於條紋寬度加上間距寬度，而 repeating-linear-gradient 會沿著漸層線在兩個方向上重新宣告最後一個色彩停駐點的區間。

這個等式正是讓「批次」條紋生成在實務上得以運作的原因。當某個元件類別的每一種變體都共用同一套輸入語法——一個以度數表示的角度、兩個六位數色，以及兩個像素度——只需轉動一個旋鈕，就能產出全新的完整圖樣，而不必重新建立數學模型。CSS Stripes Generator會把每個輸入鎖定為單一格式，將結果序列化為一條 background-image 宣告，並在即時預覽中渲染同一條宣告，因此表單上看到的內容，正是複製到剪貼簿的內容。批次工作流程因此變成同一件事:把同一個生成器套用在一組 token 值清單上，而非在樣式表中逐列手動微調。

本指南將說明每一個條紋圖樣皆須重複的輸入契約、將生成器當作批次生產工具執行的步驟、該工具所寫入的四個色彩停駐點背後的週期數學，以及讓有圖樣的背景在實際 UI 中保持可讀性的對比與動態檢查。

css stripes generator bulk
批次 CSS 條紋生成器:元件用的圖樣組合

批次條紋生成真正能發揮作用的地方

手寫的條紋用於單一主視覺背景時沒有問題。當設計系統需要的圖樣元件不僅僅是寥寥幾個時，才會浮現出採用專屬生成器的理由。特別有三種情境，會促使團隊走向批次化做法。

  • 狀態緞帶、表格列狀態，以及需要在許多元件之間共用同一套視覺語法的圖表背景。
  • 佈景主題組合——淺色、深色、高對比、品牌變體——共用幾何結構，但每次僅替換兩種顏色與一個寬度。
  • 行銷版面與活動模板，需要為短期的網頁產出數十種背景樣式，並維持一致的比例。

它們的共通點在於:幾何詞彙是固定的，變化只發生在一或兩個數值輸入上。因此批次執行的意義就是:把常數宣告一次，讓變化值在生成器表單中循環，並擷取每一條 background-image。由於宣告使用的是 background-image 而非 background 簡寫，因此單一批次輸出能與同一個選擇器上既有的 background-color、background-size 或 background-position 並存，而不會重設它們——一旦條紋背景需要疊在其他圖層之下，這個特性就至關重要。

生成器在寫入宣告前會驗證的輸入

每一批執行的結果都會產生相同形狀的 CSS，因為生成器會把每個輸入限制在嚴格的格式之內。在同一批次中混用格式，會靜悄悄地產生不一致的程式碼，所以在開始循環之前，值得先弄清楚哪些算是有效輸入。

輸入必要格式範圍或限制
角度CSS 度數，整數或小數0°–360°
條紋顏色六位數十六進位不可使用簡寫，不可含 alpha
間距顏色六位數十六進位不可使用簡寫，不可含 alpha
條紋寬度像素長度，有限數值1–200 px
間距度像素長度，有限數值1–200 px

任何超出表格規定的內容，都會回傳錯誤，而不是產生一條不完整的宣告。空白的欄位，以及像 NaN 或 Infinity 這類非有限數值，都會被拒絕，以避免不小心產生零長度的週期，否則漸層會塌陷成一個點。兩種顏色都必須以完整的六位數十六進位形式傳入(例如 #0ea5e9，而非 #0ea5e9ff)，而生成器刻意省略了透明 alpha、三個或更多中間色彩、圓錐圖樣、放射圖樣、背景定位，以及動畫——這些省略，是為了讓批次中的每一列都能逐行接受稽核。

產出兩色條紋圖樣的批次

把這個工具擴展為批次生產者最快的做法，是讓大多數輸入保持不變，讓單一維度在表單中循環，然後把每一條被接受的宣告複製到你的 token 表格中。下列順序能讓數學保持穩定，也讓你能直接把輸出貼進 CSS 變數區塊或 JSON token 匯出檔。

  1. 固定常數。挑選一組由兩個六位數十六進位顏色組成的調色盤，以及一個你希望每個變體共用的角度。把它們鎖定在生成器表單中，讓每一列只有那個會變動的維度跟著改變。
  2. 循環選定的變數。從兩個像素寬度或角度中，挑選一個讓它在小型集合中變化——例如間距寬度設為 5、8、12 與 16——然後把每一組組合各提交一次。固定其中一個寬度、掃描另一個，能產生最可預期的週期進程。
  3. 擷取每一條宣告。每次成功提交後，直接從面板複製 background-image 那行。預覽本來就使用同一條宣告，所以你看到什麼，就是複製到什麼。
  4. 在目標容器上檢查幾何結果。請在實際尺寸與縮放比例下，開啟來源元件本身——而不是獨立的預覽——來檢視。對角條紋在水平與垂直螢幕軸上的投影效果不同，沿著漸層線量到的寬度，與在螢幕上量到同樣像素數的寬度並不相同。
  5. 把像素字面值提升為 token。在合併之前，先將顏色與寬度的字面值替換為設計系統中的變數(例如 --stripe-color-primary 或 --stripe-gap-md)。生成器不會編輯下游的 token，所以這最後一步必須由你來完成。

若你的批次需要的列數遠多於寥寥幾列，可以在試算表中執行這些步驟:列出會變動的維度，然後沿著清單逐列重新整理表單，並複製每一列。每一列都是可預期且可稽核的。

週期數學與四個停駐點的硬邊清單

一旦理解週期公式，批次中的每個變體都只是單一代入。CSS Stripes Generator 會將兩條色帶的寬度相加，回報一個圖樣週期，接著序列化出四個明確的色彩停駐點，讓瀏覽器無法把一條色帶混入下一條。

輸入與停駐點之間的對應關係既直接也值得釐清:

  • 週期 = 條紋寬度 + 間距寬度。
  • 停駐點 1:條紋顏色位於 0px。
  • 停駐點 2:條紋顏色位於條紋寬度處——同一個顏色，同一個位置重複。
  • 停駐點 3:間距顏色位於條紋寬度處——同一個位置，顏色改變。
  • 停駐點 4:間距顏色位於週期處。

以具體數值示範的範例:

  • 角度:45deg
  • 條紋寬度:10px
  • 間距寬度:5px
  • 條紋顏色:#0ea5e9
  • 間距顏色:#f8fafc
  • 週期:10 + 5 = 15px
  • 停駐點(依序):#0ea5e9 0px、#0ea5e9 10px、#f8fafc 10px、#f8fafc 15px

輸出的宣告:

background-image: repeating-linear-gradient(45deg, #0ea5e9 0px, #0ea5e9 10px, #f8fafc 10px, #f8fafc 15px);

位置相同的停駐點，正是讓顏色從一種直接切換到另一種、而不是在兩條色帶之間留下一塊混合區域的關鍵。生成器會沿著漸層線在兩個方向重複同一個圖樣，這正是一條宣告能讓一個小週期在更大的表面上拼接成磚的原因——也是讓批次生成值得進行的特性。

對比、摩爾紋與動態安全檢查

批次條紋組合會放大任何品質問題，因為每個變體都帶著同一個幾何決策。透過三項檢查，能讓批次結果站得住腳。

跨越每個邊界的對比。生成器並不會量測圖樣上的文字對比——這是刻意的設計，因為每一個條紋邊緣都會造成對比變化。任何直接把長段文字疊在強烈圖樣上的列，都應該再加入一層實心覆蓋層或一個獨立的閱讀區塊，然後在整個閱讀區域上驗證對比。

小尺寸下的摩爾紋與爍。位於 1–200 像素範圍下緣的條紋度，可能會產生摩爾紋、捲動時的閃爍，或是在瀏覽器縮放與截圖時出現不穩定的外觀。若批次中的某列需要視覺穩定性，就把其中一個寬度調離極小值，並重新拍攝預覽。

過寬的色帶會失去重複感。200 像素這個上限的存在有其道理:過寬的色帶可能讓圖樣不再被讀成重複的圖樣，這也意味著設計師原本預期的視覺節奏不再成立。在把該列鎖定之前，請以實際生產尺寸檢視來源元件。

圖樣同時也是一種狀態訊號風險——絕對不要把條紋方向或顏色當成傳達意義的唯一手段。請測試強制色彩模式、深色佈景主題、瀏覽器縮放、列印、截圖，以及減少動畫偏好設定;靜態的裝飾性圖樣，通常比動態的更安全也更清楚。

有圖樣的背景會破壞版面的地方

即使批次執行本身很乾淨，到了整合階段仍可能失敗。以下兩種失敗模式發生的頻率高到值得在任何批次產生條紋的設計系統中，為它們立下專屬規則。

多個背景圖層。生成器輸出的是 background-image，而非簡寫，因此既有的 background-color、background-size 與 background-position 都不會被動到。當帶有圖樣的元件同時也擁有備援顏色時，這是較安全的預設行為;但這也代表，若某個元件本來就疊了兩條 background-image 圖層，就需要小心逗號的順序:一條全新加入、放在逗號分隔清單最後的條紋宣告，會變成前景圖層，而不是基底圖層。

響應式尺寸。沿著漸層線量到的像素寬度，並不會跟著容器寬度等比縮放。一組在 320 像素寬度下拼接得很乾淨的對角圖樣，在 1440 像素下可能會讀成不同的節奏，因為每塊磚在螢幕上看起來一樣大，但跨軸投影仍會隨所選角度改變。請為每個條紋 token 搭配一個對應的 token，用於同一個元件尺寸下的圓角或陰影——例如，讓每個變體都錨定到一個彼此協調的從圓角工具複製而來的圓角 token，讓批次中的元件變體在視覺上保持一致。

這套工作流程完全在目前的分頁中執行:沒有上傳、沒有儲存、沒有登入，也不會新增任何相依項目。你複製到的宣告，就是生成器所預覽的宣告，所以你送出的批次輸出，與你審核過的批次輸出完全相同。

規格參考

有兩份規格支撐了本文使用的 repeating-linear-gradient 行為:

延伸閱讀:CSV to JSON 批次轉換:驗證單一大型表格。