radial-gradient()関数は、円形グラデーションを指定する際に使用します。
farthest-side …… ボックスの最も遠い辺がグラデーションの終了位置となる
closest-corner …… ボックスの最も近いコーナーがグラデーションの終了位置となる
farthest-corner …… ボックスの最も遠いコーナーがグラデーションの終了位置となる（初期値）
円形グラデーションは、グラデーションの中心位置、サイズ、形状を定義することで作成されます。
グラデーションは中心位置から始まり、
外側の形状（circle、ellipse）に向かって進み、
指定されたサイズ（closest-side、farthest-side、closest-corner、farthest-corner）に合わせて終了します。
radial-gradient()関数は、
background-imageプロパティや
list-style-imageプロパティなど、
画像を扱うことのできるプロパティの値として指定できます。
以下の使用例では、
backgroundプロパティの値にradial-gradient()関数を使用しています。
以下は、radial-gradient()関数の様々な使用例です。
p.sample1, p.sample2, p.sample3, p.sample4, p.sample5 {
width:300px; height:100px;
}
p.sample1 {
background: radial-gradient(red, skyblue);
}
p.sample2 {
background: radial-gradient(ellipse farthest-side, red, yellow, skyblue);
}
p.sample3 {
background: radial-gradient(circle farthest-side, red, yellow, skyblue);
}
p.sample4 {
background: radial-gradient(circle, red 50px, yellow 70px, skyblue 100px);
}
p.sample5 {
background: radial-gradient(circle at top left, red 50px, yellow 70px, skyblue 100px);
}
<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>
<p class=”sample5″>円形グラデーション５</p>
</body>
</html>
円形グラデーション１
円形グラデーション２
円形グラデーション３
円形グラデーション４
円形グラデーション５
p.prefix_sample1, p.prefix_sample2, p.prefix_sample3, p.prefix_sample4, p.prefix_sample5 {
width:300px; height:100px;
}
p.prefix_sample1 {
background: -moz-radial-gradient(red, skyblue);
background: -webkit-radial-gradient(red, skyblue);
background: -ms-radial-gradient(red, skyblue);
}
p.prefix_sample2 {
background: -moz-radial-gradient(ellipse farthest-side, red, yellow, skyblue);
background: -webkit-radial-gradient(ellipse farthest-side, red, yellow, skyblue);
background: -ms-radial-gradient(ellipse farthest-side, red, yellow, skyblue);
}
p.prefix_sample3 {
background: -moz-radial-gradient(circle farthest-side, red, yellow, skyblue);
background: -webkit-radial-gradient(circle farthest-side, red, yellow, skyblue);
background: -ms-radial-gradient(circle farthest-side, red, yellow, skyblue);
}
p.prefix_sample4 {
background: -moz-radial-gradient(circle, red 50px, yellow 70px, skyblue 100px);
background: -webkit-radial-gradient(circle, red 50px, yellow 70px, skyblue 100px);
background: -ms-radial-gradient(circle, red 50px, yellow 70px, skyblue 100px);
}
p.prefix_sample5 {
background: -moz-radial-gradient(circle at top left, red 50px, yellow 70px, skyblue 100px);
background: -webkit-radial-gradient(circle at top left, red 50px, yellow 70px, skyblue 100px);
background: -ms-radial-gradient(circle at top left, red 50px, yellow 70px, skyblue 100px);
}
<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>
<p class=”prefix_sample5″>円形グラデーション５</p>
</body>
</html>
円形グラデーション１
円形グラデーション２
円形グラデーション３
円形グラデーション４
円形グラデーション５
