repeating-radial-gradient()関数は、繰り返しの円形グラデーションを指定する際に使用します。
構文は基本的に radial-gradient()関数と同じですが、
repeating-radial-gradient()関数では色の位置を省略せずに指定することで、グラデーションの繰り返し一回分の距離を（その計算結果としてボックス内における繰り返し回数を）制御してやる必要があるでしょう。
farthest-side …… ボックスの最も遠い辺がグラデーションの終了位置となる
closest-corner …… ボックスの最も近いコーナーがグラデーションの終了位置となる
farthest-corner …… ボックスの最も遠いコーナーがグラデーションの終了位置となる（初期値）
repeating-radial-gradient()関数では、グラデーションの終了色と次の開始色がそのままつなげられます。
そのため、配色によってはグラデーションの境目で色が急激に変化してしまうかもしれません。
グラデーションの境目をなめらかにつなげるには、終了色と開始色を同じ色にするとよいでしょう。
以下の使用例の sample3 と sample4 では、グラデーションの境目をなめらかにつなげるために終了色と開始色を同じ色にしています。
p.sample1, p.sample2, p.sample3, p.sample4 {
width:300px; height:100px;
}
p.sample1 {
background: repeating-radial-gradient(white 50%, gray);
}
p.sample2 {
background: repeating-radial-gradient(ellipse farthest-side, #ff0000 20px, rgba(255,0,0,0) 40px);
}
p.sample3 {
background: repeating-radial-gradient(circle farthest-side, red 5px, orange 10px, yellow 15px, green 20px, blue 25px, indigo 30px, violet 35px, red 40px);
}
p.sample4 {
background: repeating-radial-gradient(circle at top left, pink 0px, white 20px, skyblue 40px, white 60px, pink 80px);
}
<html>
<head>
<link rel=”stylesheet” href=”sample.css”
type=”text/css”>
</head>
<body>
<p class=”sample1″>円形グラデーション１</p>
<p class=”sample2″>円形グラデーション２</p>
<p class=”sample3″>円形グラデーション３</p>
<p class=”sample4″>円形グラデーション４</p>
</body>
</html>
円形グラデーション１
円形グラデーション２
円形グラデーション３
円形グラデーション４
p.prefix_sample1, p.prefix_sample2, p.prefix_sample3, p.prefix_sample4 {
width:300px; height:100px;
}
p.prefix_sample1 {
background: -moz-repeating-radial-gradient(white 50%, gray);
background: -webkit-repeating-radial-gradient(white 50%, gray);
background: -ms-repeating-radial-gradient(white 50%, gray);
}
p.prefix_sample2 {
background: -moz-repeating-radial-gradient(ellipse farthest-side, #ff0000 20px, rgba(255,0,0,0) 40px);
background: -webkit-repeating-radial-gradient(ellipse farthest-side, #ff0000 20px, rgba(255,0,0,0) 40px);
background: -ms-repeating-radial-gradient(ellipse farthest-side, #ff0000 20px, rgba(255,0,0,0) 40px);
}
p.prefix_sample3 {
background: -moz-repeating-radial-gradient(circle farthest-side, red 5px, orange 10px, yellow 15px, green 20px, blue 25px, indigo 30px, violet 35px, red 40px);
background: -webkit-repeating-radial-gradient(circle farthest-side, red 5px, orange 10px, yellow 15px, green 20px, blue 25px, indigo 30px, violet 35px, red 40px);
background: -ms-repeating-radial-gradient(circle farthest-side, red 5px, orange 10px, yellow 15px, green 20px, blue 25px, indigo 30px, violet 35px, red 40px);
}
p.prefix_sample4 {
background: -moz-repeating-radial-gradient(circle at top left, pink 0px, white 20px, skyblue 40px, white 60px, pink 80px);
background: -webkit-repeating-radial-gradient(circle at top left, pink 0px, white 20px, skyblue 40px, white 60px, pink 80px);
background: -ms-repeating-radial-gradient(circle at top left, pink 0px, white 20px, skyblue 40px, white 60px, pink 80px);
}
<html>
<head>
<link rel=”stylesheet” href=”sample.css”
type=”text/css”>
</head>
<body>
<p class=”prefix_sample1″>円形グラデーション１</p>
<p class=”prefix_sample2″>円形グラデーション２</p>
<p class=”prefix_sample3″>円形グラデーション３</p>
<p class=”prefix_sample4″>円形グラデーション４</p>
</body>
</html>
円形グラデーション１
円形グラデーション２
円形グラデーション３
円形グラデーション４
