當我們談論網頁背景時，腦海中浮現的往往是靜態的圖片或單調的色彩。然而，在現代網頁開發中，CSS3 賦予了我們一種更高效、更具彈性的選擇——直接用程式碼繪製圖案。這不僅僅是一種炫技，更是優化效能、實現高解析度顯示的優雅解決方案。透過 linear-gradient 與 radial-gradient 等屬性的巧妙組合，我們可以創造出輕量、清晰且極易修改的向量圖樣。本文將帶你探索這項現代前端技術，從簡單的條紋到複雜的棋盤格，學習如何用純 CSS 為你的網站增添獨一無二的視覺魅力，同時兼顧效能與質感。

1. 簡單的水平條紋

這是最基礎的技巧，利用 linear-gradient 來創造色塊。

<div class="pattern stripes"></div>
CSS

.stripes {
  width: 100%;
  height: 200px;
  background-image: linear-gradient(
    to bottom, /* 方向 */
    #ff9a9e 50%, /* 顏色與位置 */
    #fecfef 50%
  );
  background-size: 100% 50px; /* 條紋的高度 */
}

原理：我們創建了一個從上到下的漸層，但在 50% 的位置顏色立刻轉變，形成清晰的邊界。然後透過 background-size 讓這個 50px 高的「漸層圖片」不斷重複，就形成了條紋。

2. 重複的斜紋

利用 repeating-linear-gradient 可以輕鬆做出重複的斜線。

HTML

<div class="pattern diagonal-stripes"></div>
CSS

.diagonal-stripes {
  width: 100%;
  height: 200px;
  background-image: repeating-linear-gradient(
    45deg, /* 傾斜 45 度 */
    #a18cd1,
    #a18cd1 10px, /* 實線寬度 */
    #fbc2eb 10px,
    #fbc2eb 20px  /* 實線加虛線的總寬度 */
  );
}

原理：這個漸層會沿著 45 度角繪製，並在 0-10px 顯示第一種顏色，10-20px 顯示第二種顏色，然後不斷重複這個 20px 的模式。

3. 棋盤格圖案

這是堆疊多層背景的經典範例，我們將水平條紋和垂直條紋疊在一起。

HTML

<div class="pattern checkerboard"></div>
CSS

.checkerboard {
  width: 100%;
  height: 200px;
  background-color: #eee;
  background-image:
    linear-gradient(45deg, #aaa 25%, transparent 25%),
    linear-gradient(-45deg, #aaa 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #aaa 75%),
    linear-gradient(-45deg, transparent 75%, #aaa 75%);
  background-size: 20px 20px; /* 每個格子的尺寸 */
}

原理：這裡我們用逗號 , 分隔了四個不同的 linear-gradient。瀏覽器會將它們一層層疊加上去。搭配 background-size 控制格子的大小，就能形成棋盤格。

網路上也有現成的圖案:
CSS Pattern Gallery: https://css-pattern.com/