放射状（円形）ストライプグラデーション Repeating Radial Gradient
放射状（円形）ストライプグラデーションについて
放射状（円形）ストライプグラデーションはbackgroundまたはbackground-imageプロパティにrepeating-radial-gradient関数を設定します。
基本的にはradial-gradientと同じ動作と引数ですが、repeating-radial-gradientは色の位置を自動的に繰り返し、ストライプとして描画します。
【構文】
background:repeating-radial-gradient(サイズ 形状 at 方向, 開始色, 終了色);
| 形状 | |
|---|---|
| 名称 | 設定値 |
| circle | 正円 |
| ellipse | 楕円（初期値） |
| サイズ | |
|---|---|
| 名称 | 設定値 |
| cover | 要素の大きさに合わせて覆う（初期値） |
| contain | 要素の大きさに合わせる |
| closest-side | 要素の大きさの一番近い辺に合わせる |
| closest-corner | 要素の大きさの一番近い角に合わせる |
| farthest-side | 要素の大きさの一番遠い辺に合わせる |
| farthest-corner | 要素の大きさの一番遠い角に合わせる |
| 方向 | ||
|---|---|---|
| 名称 | 設定値 | 設定値 旧Webkit仕様 |
| 中央（上下左右） | center center（初期値） | center center（初期値） |
| 左上→右下 | left top | left top |
| 上中央→下中央 | center top | center top |
| 右上→左下 | right top | right top |
| 左下→右上 | left bottom | left bottom |
| 下中央→上中央 | center bottom | center bottom |
| 右下→左上 | right bottom | right bottom |
【サンプル】
中央
左上→右下
上中央→
下中央
右上→左下