repeating-radial-gradient(円の形とサイズ at 中心位置, 開始色, 終了色 位置); で繰り返しの円形グラデーションを指定することができます。

<p>タグのボックスで使用例を挙げてみます。

下の例ではwhiteの位置を省略しているので開始位置は0％になります。 横幅150px　高さ50pxの楕円形で0%～10％まで白色からはじまりアクアのグラデーションを繰り返しています。

【ブラウザ表示】

繰り返し

<p class="enkei_gbox4">繰り返し</p>

p.enkei_gbox4{
width:200px;
height:200px;
background:repeating-radial-gradient(ellipse 150px 50px, white, aqua 10%);
}

<p style="width:200px; height:200px; background:repeating-radial-gradient(ellipse 150px 50px, white, aqua 10%);">繰り返し</p>

■ 土星風のグラデーション

繰り返しの円形グラデーションを複数組み合わせ、さらにボーダーをborder-radiusのプロパティで丸くすることで土星の環の中のような球体のグラデーションにすることができます。

【ブラウザ表示】

土星

<p class="enkei_gbox5">土星</p>

p.enkei_gbox5{
width:200px;
height:200px;
background:repeating-radial-gradient(ellipse at 70px 70px, #CC9966 6px 10px, #996666 11px 15px,
transparent 16px, #CC9966 21px, transparent 26px, #CC9966 31px, transparent 50px),
radial-gradient(ellipse 150px 50px, #FFCC00 10px 15px, white 70%);
border-radius:50%;
}

<p style="width:200px; height:200px; background:repeating-radial-gradient(ellipse at 70px 70px, #CC9966 6px 10px, #996666 11px 15px, transparent 16px, #CC9966 21px, transparent 26px, #CC9966 31px, transparent 50px), radial-gradient(ellipse 150px 50px, #FFCC00 10px 15px, white 70%); border-radius:50%;">土星</p>

■ ホース状グラデーション

開始色、中間色、終了色の間隔を短くして繰り返しの円形グラデーションを指定し　さらにボーダーをborder-radiusのプロパティで丸くすることでする ことで http://hmaster.net/cgradation2.html のホース状グラデーションと同じような表示にすることができます。

【ブラウザ表示】

ホース状グラデーション

<p class="enkei_gbox6">ホース状グラデーション</p>

p.enkei_gbox6{
width:200px;
height:200px;
background:repeating-radial-gradient(white 45%, blue 50%, white 51%);
border-radius:50%;
}

<p style="width:200px; height:200px; background:repeating-radial-gradient(white 45%, blue 50%, white 51%); border-radius:50%;">ホース状グラデーション</p>

■ その他の項目

スタイルシート一覧のページに戻る