repeating-radial-gradient 関数
関数 repeating-radial-gradient
は反復放射グラデーションを設定します。
これは、例えば 0px から 10px までの
赤から青へのグラデーションパターンを定義すると、
そのグラデーションが要素全体に繰り返されることを意味します:
0px から 10px、10px
から 20px、20px から 30px
のように続きます。
この関数は、
radial-gradient
と同じパラメータを使用し、違いは反復効果のみです。
受け入れるパラメータについては radial-gradient の説明を参照してください。
構文
セレクタ {
background: repeating-radial-gradient([形状 タイプ 位置], 色1 サイズ1, 色2 サイズ2...);
}
例
同心円:
<div id="elem"></div>
#elem {
background: repeating-radial-gradient(circle at center, red 0px, red 2px, white 2px, white 4px);
width: 400px;
height: 200px;
}
:
例
同心楕円:
<div id="elem"></div>
#elem {
background: repeating-radial-gradient(ellipse at center, red 0px, red 4px, white 4px, white 8px);
width: 400px;
height: 200px;
}
:
例
同心円を中央ではなく端に配置します:
<div id="elem"></div>
#elem {
background: repeating-radial-gradient(circle at 50px 100px, red 0px, red 2px, white 2px, white 4px);
width: 400px;
height: 200px;
}
:
関連項目
-
反復線形グラデーションを作成する関数
repeating-linear-gradient -
線形グラデーションを作成する関数
linear-gradient -
放射グラデーションを作成する関数
radial-gradient