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
2つの位置の色の終了ポイント
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() 函数