CSS repeating-radial-gradient() 関数

定義と使用方法

CSS repeating-radial-gradient() 再現する放射状の徐々に変化する色に用いる関数。

放射状の徐々に変化する色	一重の放射状の徐々に変化する色

radial-gradient(red, yellow, green);	repeating-radial-gradient(red, yellow 10%, green 15%);

一重の放射状の徐々に変化する色：

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

もう一つの重复的径向渐变，设置了形状大小和位置：

#grad1 {
  background-image: repeating-radial-gradient(ellipse farthest-corner at 25% 25%, red, yellow 10%, green 15%);
}

もう一つの重复的径向渐变，设置了两个颜色停止位置：

#grad1 {
  background-image: repeating-radial-gradient(red 0% 10%, yellow 11% 21%, green 22% 32%);
}

repeating-radial-gradient(shape size at position, start-color, ... , last-color);

値	説明
shape	グラデーションの形状を定義します。可能な値： ellipse（デフォルト） circle
size	グラデーションのサイズを定義します。可能な値： farthest-corner（デフォルト） closest-side closest-corner farthest-side
at position	グラデーションの位置を定義します。デフォルト値は "center" です。
start-color, ... , last-color	色の終端点は、その間に滑らかな遷移を表示したい色です。この値は、色値と一つまたは二つのオプションの停止位置（0% から 100% の間のパーセンテージまたはグラデーション軸の長さ）で構成されています。

バージョン：	CSS Images Module Level 3

テーブルの数字は、その関数を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome	Edge	Firefox	Safari	Opera
repeating-radial-gradient()
26	10	16	6.1	12.1
二つの位置の色の終端点
71	79	64	12.1	58