戻るホーム次へ

円形グラデーション- 等間隔

<!DOCTYPE html>
<html>
<head>
<style> 
#grad1{
	height:150px;
	width:200px;
	background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 to 6.0 */
	background: -o-radial-gradient(red, yellow, green);      /* For Opera 11.6 to 12.0 */
	background: -moz-radial-gradient(red, yellow, green);    /* For Firefox 3.6 to 15 */
	background: radial-gradient(red, yellow, green);         /* Standard syntax (must be last) */
}

</style>
</head>
<body>
<h3>円形グラデーション- 等間隔
<div id="grad1"></div>

</body>
</html>

円形グラデーション - 間隔指定

<!DOCTYPE html>
<html>
<head>
<style> 
#grad2{
	height:150px;
	width:200px;
	background: -webkit-radial-gradient(red 5%, yellow 15%, green 60%); /* Safari 5.1 to 6.0 */
	background: -o-radial-gradient(red 5%, yellow 15%, green 60%);      /* For Opera 11.6 to 12.0 */
	background: -moz-radial-gradient(red 5%, yellow 15%, green 60%);    /* For Firefox 3.6 to 15 */
	background: radial-gradient(red 5%, yellow 15%, green 60%);         /* Standard syntax (must be last) */
}
</style>
</head>
<body>

<h3>円形グラデーション - 間隔指定</h3>
<div id="grad2"></div><
</body>
</html>

円形グラデーション - shape指定

楕円形（デフォルト）：

円形：

<!DOCTYPE html>
<html>
<head>
<style> 
#grad3{
	height:150px;
	width:200px;
	background: -webkit-radial-gradient(red, yellow, green); /* For Safari 5.1 to 6.0 */
	background: -o-radial-gradient(red, yellow, green);      /* For Opera 11.6 to 12.0 */
	background: -moz-radial-gradient(red, yellow, green);    /* For Fx 3.6 to 15 */
	background: radial-gradient(red, yellow, green);         /* Standard syntax (must be last) */
}

#grad4{
	height:150px;
	width:200px;
	background: -webkit-radial-gradient(circle, red, yellow, green); /* For Safari 5.1 to 6.0 */
	background: -o-radial-gradient(circle, red, yellow, green);      /* For Opera 11.6 to 12.0 */
	background: -moz-radial-gradient(circle, red, yellow, green);    /* For Fx 3.6 to 15 */
	background: radial-gradient(circle, red, yellow, green);         /* Standard syntax (must be last) */
}
</style>
</head>
<body>

<h3>円形グラデーション - shape指定</h3>
<div>
<p><strong>楕円形（デフォルト）：</strong></p>
<div id="grad3"></div>

<p><strong>円形：</strong></p>
<div id="grad4"></div>

</body>
</html>

円形グラデーション - サイズ指定

closest-side
farthest-side
closest-corner
farthest-corner (this is default)
<!DOCTYPE html>
<html>
<head>
<style> 
#grad5{
	height:150px;width:150px;float:left;
	background: -webkit-radial-gradient(60% 55%, closest-side,red,yellow,green,black); /* Safari 5.1 to 6.0 */
	background: -o-radial-gradient(60% 55%, closest-side,red,yellow,green,black);      /* For Opera 11.6 to 12.0 */
	background: -moz-radial-gradient(60% 55%, closest-side,red,yellow,green,black);    /* For Firefox 3.6 to 15 */
	background: radial-gradient(60% 55%, closest-side,red,yellow,green,black);         /* Standard syntax (must be last) */
}
#grad6{
	height:150px;width:150px;float:left;margin-left:10px;
	background: -webkit-radial-gradient(60% 55%, farthest-side,red,yellow,green,black); /* Safari 5.1 to 6.0 */
	background: -o-radial-gradient(60% 55%, farthest-side,red,yellow,green,black);      /* For Opera 11.6 to 12.0 */
	background: -moz-radial-gradient(60% 55%, farthest-side,red,yellow,green,black);    /* For Firefox 3.6 to 15 */
	background: radial-gradient(60% 55%, farthest-side,red,yellow,green,black);         /* Standard syntax (must be last) */
}
#grad7{
height:150px;width:150px;float:left;margin-left:10px;
	background: -webkit-radial-gradient(60% 55%, closest-corner,red,yellow,green,black); /* Safari 5.1 to 6.0 */
	background: -o-radial-gradient(60% 55%, closest-corner,red,yellow,green,black);      /* For Opera 11.6 to 12.0 */
	background: -moz-radial-gradient(60% 55%, closest-corner,red,yellow,green,black);    /* For Firefox 3.6 to 15 */
	background: radial-gradient(60% 55%, closest-corner,red,yellow,green,black);         /* Standard syntax (must be last) */
}
#grad8{
height:150px;width:150px;float:left;margin-left:10px;
	background: -webkit-radial-gradient(60% 55%, farthest-corner,red,yellow,green,black); /* Safari 5.1 to 6.0 */
	background: -o-radial-gradient(60% 55%, farthest-corner,red,yellow,green,black);      /* For Opera 11.6 to 12.0 */
	background: -moz-radial-gradient(60% 55%, farthest-corner,red,yellow,green,black);    /* For Firefox 3.6 to 15 */
	background: radial-gradient(60% 55%, farthest-corner,red,yellow,green,black);         /* Standard syntax (must be last) */
}
</style>
</head>
<body>

<h3>円形グラデーション - サイズ指定</h3>
<div>
<div id="grad5" style="color:white"><strong>closest-side</strong></div>
<div id="grad6" style="color:white"><strong>farthest-side</strong></div>
<div id="grad7" style="color:white"><strong>closest-corner</strong></div>
<div id="grad8" style="color:white"><strong>farthest-corner (this is default)</strong></div>
<div style="clear:both;"></div>


</body>
</html>

円形グラデーション- 繰返し

<!DOCTYPE html>
<html>
<head>
<style> 
#grad1{
	height:150px;
	width:200px;
	background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 to 6.0 */
	background: -o-radial-gradient(red, yellow, green);      /* For Opera 11.6 to 12.0 */
	background: -moz-radial-gradient(red, yellow, green);    /* For Firefox 3.6 to 15 */
	background: radial-gradient(red, yellow, green);         /* Standard syntax (must be last) */
}

</style>
</head>
<body>
<h3>円形グラデーション- 等間隔
<div id="grad9"></div>

</body>
</html>