CSS 彩色條紋怎麼做？用 linear-gradient 做多色分段色條（附顏色寫法整理）

這篇文章原本叫「css 彩色語法」，內容是一條由六種顏色分段組成的彩色色條，常放在網頁最上方、標題下面或卡片頂端當裝飾。

舊版的程式碼寫了八行：-moz-、-webkit-、-o-、-ms- 前綴各一行，再加一行 IE 專用的 filter。現在這些都不需要了，一行 linear-gradient 就能做到。

原理：讓漸層「不要漸變」

linear-gradient 本來是做漸層用的，但如果前一個顏色結束的位置，剛好就是下一個顏色開始的位置，中間就不會慢慢漸變，而是直接切換，變成一段一段的色塊：

.color-bar {
  height: 6px;
  background: linear-gradient(to right,
    #f76570 0 17%,
    #f3a46b 17% 33%,
    #ffd205 33% 50%,
    #1bbc9b 50% 67%,
    #14b9d5 67% 83%,
    #c377e4 83% 100%
  );
}

• to right：由左往右排列。
• #f76570 0 17%：這個顏色從 0 畫到 17%。一個顏色後面寫兩個位置，就是「從哪裡到哪裡」，現代瀏覽器都支援這種寫法。
• height：色條的高度（粗細）。

舊版文章的色條是這六個顏色重複兩次。不用把十二段全部寫出來，加一行 background-size 讓圖樣只佔一半寬度，就會自動重複：

.color-bar {
  background-size: 50% 100%;
}

用 CSS 變數，寫一次到處用

色條的顏色很長，要用在好幾個地方時，先存成 CSS 變數：

:root {
  --rainbow: linear-gradient(to right,
    #f76570 0 17%, #f3a46b 17% 33%, #ffd205 33% 50%,
    #1bbc9b 50% 67%, #14b9d5 67% 83%, #c377e4 83% 100%);
}

之後只要寫 background: var(--rainbow); 就好，要換顏色也只改這一個地方。下面的範例都用這個變數。

三種常見的用法

1. 網頁最上方的一條色條

body::before {
  content: "";
  display: block;
  height: 6px;
  background: var(--rainbow);
}

如果主題的選單是固定在畫面上方的，色條可能會被選單蓋住，這時候改加在選單外層的元素上。

2. 卡片頂端的彩色邊

.card {
  border-top: 6px solid;
  border-image: var(--rainbow) 1;
}

只有上方設定了邊框寬度，所以只有上面會出現色條。border-image 後面的 1 是切割的數值，用漸層當邊框時寫 1 就可以。

要注意 border-image 不會跟著 border-radius 變圓角。卡片有圓角的話，改用偽元素：

.card {
  border-radius: 12px;
  overflow: hidden;
}

.card::before {
  content: "";
  display: block;
  height: 6px;
  background: var(--rainbow);
}

3. 標題下方的短色條

.section-title::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  margin-top: 12px;
  background: var(--rainbow);
}

標題置中的話，再加上 margin-inline: auto;，色條也會跟著置中。

固定寬度的重複條紋

想要每個色塊固定寬度、不管區塊多寬都一直重複下去，用 repeating-linear-gradient：

.stripes {
  height: 8px;
  background: repeating-linear-gradient(to right,
    #f76570 0 40px,
    #ffd205 40px 80px,
    #14b9d5 80px 120px
  );
}

每種顏色 40px，排完三個顏色（120px）就從頭再來一次。

斜條紋

把方向改成角度，就變成斜的條紋，像施工警示帶：

.caution {
  height: 24px;
  background: repeating-linear-gradient(45deg,
    #ffd205 0 12px,
    #222 12px 24px
  );
}

適合用在公告、限時活動這類要引起注意的區塊邊緣。條紋上不要直接放文字，會很難閱讀。

舊寫法可以刪掉的部分

• -moz-linear-gradient、-webkit-linear-gradient、-o-linear-gradient、-ms-linear-gradient：很舊的瀏覽器才需要的前綴版本，現在的瀏覽器都支援不加前綴的 linear-gradient。
• -webkit-gradient(linear, left top, right top, color-stop(...))：更早期的語法，早就被淘汰。
• filter: progid:DXImageTransform.Microsoft.gradient(...)：舊版 IE 專用，而且只能做兩種顏色的漸層，本來就做不出彩色分段的效果。
• 最前面的 background: #f76570;：原本是給不支援漸層的瀏覽器看的單一底色，現在也可以省略。

CSS 顏色的幾種寫法

色條裡用的 #f76570 是 HEX 色碼。CSS 還有其他表示顏色的方法，各有適合的時候：

.demo {
  color: #f76570;                /* HEX:紅、綠、藍各兩碼 */
  color: #f76570cc;              /* 8 碼 HEX:最後兩碼是透明度,cc 約 80% */
  color: rgb(247 101 112);       /* RGB:紅、綠、藍各 0 到 255 */
  color: rgb(247 101 112 / 80%); /* 斜線後面是不透明度 */
  color: hsl(355 90% 68%);       /* HSL:色相、飽和度、亮度 */
}

• HEX：設計軟體、品牌規範最常提供的格式。
• RGB：需要半透明時很直覺，舊寫法 rgba(247, 101, 112, 0.8) 也還能用。
• HSL：最適合「調顏色」。色相（色環上 0～360 度的位置）、飽和度、亮度分開寫，想要同一個顏色淺一點，只要把亮度調高。例如 hsl(355 90% 68%) 大約就是 #f76570，改成 hsl(355 90% 85%) 就是同色系的淺粉紅。

color-mix()：用現有的顏色調出新顏色

:root {
  --brand: #f76570;
  --brand-light: color-mix(in srgb, var(--brand), white 40%);
  --brand-dark: color-mix(in srgb, var(--brand), black 20%);
}

color-mix() 會把兩個顏色依比例混合：上面就是「品牌色混 40% 白色」變淺、「品牌色混 20% 黑色」變深。以後品牌色要換，只改 --brand 一個地方，淺色、深色版本會自動跟著變。color-mix() 從 2023 年起主流瀏覽器都已支援。

延伸閱讀

• CSS 流動漸層邊框怎麼做？會變色的彩色外框寫法（支援圓角，附程式碼）
• CSS 漂亮底線寫法：螢光筆標記、滑過展開的連結底線與 text-decoration 新屬性
• 好用的 CSS 語法技巧：半透明、圓角、陰影、字型等 15 個常用寫法

一條小小的彩色色條，就能讓版面多一點個性。正威網路行銷是基隆在地、25 年經驗的基隆網頁設計工作室，提供客製化網頁設計與 RWD 響應式網站，歡迎來聊聊。