CSS repeating-linear-gradient() 函數

定義和用法

CSS repeating-linear-gradient() 函數用于重復線性漸變。

實例：

線性漸變 重復線性漸變
linear-gradient(red, yellow, blue); repeating-linear-gradient(red, yellow 10%, blue 20%);

實例

例子 1

一個重復的線性漸變：

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

親自試一試

例子 2

不同的重復線性漸變：

#grad1 {
  background-image: repeating-linear-gradient(45deg, red, blue 7%, green 10%);
}
#grad2 {
  background-image: repeating-linear-gradient(190deg, red, blue 7%, green 10%);
}
#grad3 {
  background-image: repeating-linear-gradient(90deg, red, blue 7%, green 10%);
}

親自試一試

CSS 語法

repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);
值 描述
angle 定義漸變的方向角度。從 0deg 到 360deg。默認值為 180deg。
side-or-corner

定義漸變線起點的位置。

它由兩個關鍵字組成：第一個表示水平方向（left 或 right），第二個表示垂直方向（top 或 bottom）。

順序不重要，且每個關鍵字都是可選的。
color-stop1, color-stop2,...

顏色終止點是您希望在其間呈現平滑過渡的顏色。

此值由顏色值和一或兩個可選的停止位置（0% 到 100% 之間的百分比或沿漸變軸的長度）組成。

技術細節

版本： CSS Images Module Level 3

瀏覽器支持

表格中的數字表示首個完全支持該函數的瀏覽器版本。

Chrome Edge Firefox Safari Opera
repeating-linear-gradient()
26 10 16 6.1 12.1
兩個位置的顏色終止點
71 79 64 12.1 58

相關頁面

教程：CSS 漸變

參考：CSS background-image 屬性

參考：CSS conic-gradient() 函數

參考：CSS linear-gradient() 函數

參考：CSS radial-gradient() 函數

參考：CSS repeating-conic-gradient() 函數

參考：CSS repeating-radial-gradient() 函數