repeating-radial-gradient 関数

関数 repeating-radial-gradient は反復放射グラデーションを設定します。 これは、例えば 0px から 10px までの 赤から青へのグラデーションパターンを定義すると、 そのグラデーションが要素全体に繰り返されることを意味します： 0px から 10px、10px から 20px、20px から 30px のように続きます。

この関数は、 radial-gradient と同じパラメータを使用し、違いは反復効果のみです。 受け入れるパラメータについては radial-gradient の説明を参照してください。

構文

cssセレクタ {
  background: repeating-radial-gradient([形状 タイプ 位置], 色1 サイズ1, 色2 サイズ2...);
}

例

同心円：

html<div id="elem"></div>

css#elem {
  background: repeating-radial-gradient(circle at center, red 0px, red 2px, white 2px, white 4px);
  width: 400px;
  height: 200px;
}

Результат:

例

同心楕円：

html<div id="elem"></div>

css#elem {
  background: repeating-radial-gradient(ellipse at center, red 0px, red 4px, white 4px, white 8px);
  width: 400px;
  height: 200px;
}

Результат:

例

同心円を中央ではなく端に配置します：

html<div id="elem"></div>

css#elem {
  background: repeating-radial-gradient(circle at 50px 100px, red 0px, red 2px, white 2px, white 4px);
  width: 400px;
  height: 200px;
}

Результат:

関連項目