CSSグラデーション

スポンサーリンク
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>【CSS】グラデーション</title>
</head>
<style>
p.s1, p.s3, {
width:500px; height:100px;
}
p.s1 {
background: radial-gradient(red, red);
background: -moz-radial-gradient(red, red);
background: -webkit-gradient(radial, center center, 10, center center, 30, from(red), to(white));
border: solid 1px #000;
border-radius: 8px;
}
p.s3 {
background: radial-gradient(top right, circle, red 100px, yellow 100px, rgba(255,255,255,0) 100px);
background: -moz-radial-gradient(top right, circle, red 100px, yellow 100px, rgba(255,255,255,0) 100px);
background: -webkit-gradient(radial, right top, 0, right top, 300, from(red), color-stop(55%, yellow), color-stop(50%, rgba(255,255,0,0)), to(rgba(255,255,0,0)));
border: solid 1px #000;
border-radius: 8px;
}
</style>
<body>
<p class="s1">太陽風グラデーション</p>
<p class="s3">太陽光風グラデーション</p>
</body>
</html>