円形グラデーション- 等間隔
<!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>