radial-gradient(開始する色, 終了する色);で円形グラデーションを指定することができます。 開始する色は円の中央からはじまり　終了する色は外側になります。円の形とサイズは省略できます。

グラデーションの形は正円か楕円で楕円は初期値となります。サイズは以下の通り。

<p>タグのボックスで使用例を挙げてみます。 最初は中心からバイオレットではじまり最後は黄色のグラデーションです。

【ブラウザ表示】

円形

<p class="enkei_gbox">円形</p>

p.enkei_gbox{
width:200px;
height:200px;
background:radial-gradient(violet, yellow);
}

<p style="width:200px; height:200px; background:radial-gradient(violet, yellow);">円形</p>

■ 中心となる位置を指定する

radial-gradient(at 中心の位置, 開始色, 終了色);で円の中心となる位置を指定することができます。

右上の角を見るとバイオレットから円のグラデーションがかかっているのがわかります。

【ブラウザ表示】

中心は右上

<p class="enkei_gbox2">中心は右上</p>

p.enkei_gbox2{
width:200px;
height:200px;
background:radial-gradient(at top right, violet, yellow);
}

<p style="width:200px; height:200px; background:radial-gradient(at top right, violet, yellow);">中心は右上</p>

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

この例では0～45％は透明、45%～50%は透明から青色へ、50％～51％は青色から透明へ、内側の ２番目の円は0～40％は透明、40%～45%は透明から青色、45％～46％は青色から透明　という具合に グラデーションがかかります。 値にtransparentを指定し3色にしたことによりホースのような見た目のグラデーションになります。

【ブラウザ表示】

ホース

<p class="enkei_gbox3">ホース</p>

p.enkei_gbox3{
width:200px;
height:200px;
background:radial-gradient(transparent 45%, blue 50%, transparent 51%),
radial-gradient(transparent 40%, blue 45%, transparent 46%),
radial-gradient(transparent 35%, blue 40%, transparent 41%),
radial-gradient(transparent 30%, blue 35%, transparent 36%),
radial-gradient(transparent 25%, blue 30%, transparent 31%);
}

<p style="width:200px; height:200px; background:radial-gradient(transparent 45%, blue 50%, transparent 51%), radial-gradient(transparent 40%, blue 45%, transparent 46%), radial-gradient(transparent 35%, blue 40%, transparent 41%), radial-gradient(transparent 30%, blue 35%, transparent 36%), radial-gradient(transparent 25%, blue 30%, transparent 31%);">ホース</p>

■ その他の項目

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