CSS3

CSS関数

repeating-radial-gradient()

[Edge]○。→●、mdn

放射型グラデーション（繰り返す）。

<ending-shape>

＝circle | ellipse

この引数が省略された場合の既定の終形は、<size> が単独の <length> からなる場合は 真円になり、他の場合は 楕円になる。

<size>

＝<extent-keyword>
| <length[0,∞]>
| <length-percentage[0,∞]>{2}

終形のサイズを決定する。

省略された場合の既定は、farthest-corner になる。これは、数値的な値として、またはキーワードにより与え得る。

各種キーワード定義の目的においては、gradient ボックスの各辺は、有限の線分ではなく、両方向に無限に延伸するものと見なす。

終形が楕円の場合の その各軸は、順に、横軸、縦軸に沿う。

circle、ellipse による gradient のいずれも、次に挙げるキーワードを <size> として受容する：

<position>

gradient の 中心位置 を決定する。[CSS-VALUES-3] に定義される <position> 値型（background-position 用にも利用される）は、中心点をオブジェクト区画に、gradient ボックスを位置決め区画に利用して、解決される†。この引数が省略された場合の既定は、center になる。

【† どう“解決される”か定義されていないが、おそらく、次の対応関係の下で［background-position 用の <position> 値］と同様に解決するように見受けられる： (1) 中心の一点を成す面積 0 の区画 → 背景塗り区画、(2) gradient ボックス → 背景位置決め区画］】

<DIV style="border:1px solid red; width:100px; height:100px;
 background:repeating-radial-gradient(circle at top left, #ff0, #f00);
">テスト</DIV>

<DIV style="border:1px solid red; width:100px; height:100px;
 background:repeating-radial-gradient(circle at 20% top, #ff0, #f00);
">テスト</DIV>

at で「keyword <length>」ができない

<color-stop-list>

＝<linear-color-stop>, [[<linear-color-hint>,]? <linear-color-stop>]#

circle

gradient の終形を真円にする。

<DIV style="border:1px solid red; width:100px; height:100px;
 background:repeating-radial-gradient(circle, #ff0, #f00);
">テスト</DIV>

<DIV style="border:1px solid red; width:200px; height:100px;
 background:repeating-radial-gradient(circle, #ff0, #f00);
">テスト</DIV>

ellipse

gradient の終形を楕円にする。

<DIV style="border:1px solid red; width:100px; height:100px;
 background:repeating-radial-gradient(ellipse, #ff0, #f00);
">テスト</DIV>

<DIV style="border:1px solid red; width:200px; height:100px;
 background:repeating-radial-gradient(ellipse, #ff0, #f00);
">テスト</DIV>

<extent-keyword>

＝closest-corner
| closest-side
| farthest-corner
| farthest-side

<length[0,∞]> ○

<ending-shape> が circle に指定されている、または省略された場合。

真円 ― circle ― の半径を数値的に与える。負な値は無効。

注記： 百分率は許容されないことに注意。百分率を利用できるのは、楕円な ― ellipse による ― gradient サイズを指定するときに限られる。この制約は、百分率を どの寸法に相対的とするべきかについて，理に適う解が複数あるため、存在する。このモジュールの将来レベルでは、百分率で真円をサイズする能を供し得る ― たぶん、どの寸法を利用するかについて、より明示的な制御を伴って。

<DIV style="border:1px solid red; width:100px; height:100px;
 background:repeating-radial-gradient(circle 20px, #ff0, #f00);
">テスト</DIV>

<length-percentage[0,∞]>{2} ○

<ending-shape> が ellipse に指定されている、または省略された場合。

楕円のサイズを数値的に与える。2 個の値は順に、横半径、縦半径を表現する。百分率による値は、gradient ボックスの対応する次元のサイズに相対的になる。負な値は無効。

<DIV style="border:1px solid red; width:100px; height:100px;
 background:repeating-radial-gradient(ellipse 40px 20px, #ff0, #f00);
">テスト</DIV>

closest-side

終形が真円の場合、終形は、gradient の中心に最も近い［gradient ボックスの辺］に正確に接するようにサイズされる。

楕円の場合の終形は、各次元ごとに、最も近い辺に正確に接するようにサイズされる。

<DIV style="border:1px solid red; width:100px; height:100px;
 background:repeating-radial-gradient(circle closest-side, #ff0, #f00);
">テスト</DIV>

<DIV style="border:1px solid red; width:200px; height:100px;
 background:repeating-radial-gradient(circle closest-side, #ff0, #f00);
">テスト</DIV>

<DIV style="border:1px solid red; width:200px; height:100px;
 background:repeating-radial-gradient(ellipse closest-side, #ff0, #f00);
">テスト</DIV>

farthest-side

中心から最も遠い辺に接するようにサイズされることを除いて closest-side と同じ。

<DIV style="border:1px solid red; width:100px; height:100px;
 background:repeating-radial-gradient(circle farthest-side, #ff0, #f00);
">テスト</DIV>

<DIV style="border:1px solid red; width:200px; height:100px;
 background:repeating-radial-gradient(circle farthest-side, #ff0, #f00);
">テスト</DIV>

closest-corner

終形は、gradient の中心に最も近い［gradient ボックスの隅］を通るようにサイズされる。楕円の終形の縦横比は、closest-side が指定されたときと同じにされる。

<DIV style="border:1px solid red; width:100px; height:100px;
 background:repeating-radial-gradient(circle closest-corner, #ff0, #f00);
">テスト</DIV>

<DIV style="border:1px solid red; width:100px; height:100px;
 background:repeating-radial-gradient(circle closest-corner at top, #ff0, #f00);
">テスト</DIV>

farthest-corner

中心から最も遠い隅に接するようにサイズされることを除いて closest-corner と同じ。楕円の終形の縦横比は、farthest-side が指定されたときと同じにされる。

<DIV style="border:1px solid red; width:100px; height:100px;
 background:repeating-radial-gradient(circle farthest-corner, #ff0, #f00);
">テスト</DIV>

<DIV style="border:1px solid red; width:100px; height:100px;
 background:repeating-radial-gradient(circle farthest-corner at top, #ff0, #f00);
">テスト</DIV>

<linear-color-stop>

＝<color> && <length-percentage>?

<DIV style="border:1px solid red; width:100px; height:100px;
 background:repeating-radial-gradient(circle, #ff0, #f00);
">テスト</DIV>

<DIV style="border:1px solid red; width:100px; height:100px;
 background:repeating-radial-gradient(circle, #ff0 20px, #f00);
">テスト</DIV>

20pxから始まる

<DIV style="border:1px solid red; width:100px; height:100px;
 background:repeating-radial-gradient(circle, #ff0, #f00 20px);
">テスト</DIV>

20pxまで

<DIV style="border:1px solid red; width:100px; height:100px;
 background:repeating-radial-gradient(circle, #ff0 20px, #f00 40px);
">テスト</DIV>

20px～40pxのを繰り返す

<linear-color-hint>

＝<length-percentage>

<DIV style="border:1px solid red; width:100px; height:100px;
 background:repeating-radial-gradient(circle, #ff0, 20%, #f00);
">テスト</DIV>

<DIV style="border:1px solid red; width:100px; height:100px;
 background:repeating-radial-gradient(circle, #ff0, 50%, #f00);
">テスト</DIV>

<DIV style="border:1px solid red; width:100px; height:100px;
 background:repeating-radial-gradient(circle, #ff0, 80%, #f00);
">テスト</DIV>

関連

linear-gradient()、conic-gradient()、radial-gradient()。

repeating-linear-gradient()、repeating-conic-gradient()、repeating-radial-gradient()。

テスト