}
</style>
</head>
<body>
<h3>径向渐变 – 形状</h3>
<p><strong>椭圆形 Ellipse(默认):</strong></p>
<div id="grad1"></div>
<p><strong>圆形 Circle:</strong></p>
<div id="grad2"></div>
<p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
</body>
</html>

(4)、不同尺寸大小关键字的使用
size 参数定义了渐变的大小。它可以是以下四个值:closest-side、farthest-side、closest-corner、farthest-corner
(5)、重复的径向渐变
repeating-radial-gradient() 函数用于重复径向渐变
XML/HTML Code复制内容到剪贴板
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Safari 5.1 – 6.0 */
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6 – 12.0 */
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6 – 15 */
background: repeating-radial-gradient(red, yellow 10%, green 15%); /* 标准的语法(必须放在最后) */
}
</style>
</head>
<body>
<h3>重复的径向渐变</h3>
<div id="grad1"></div>
<p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
</body>
</html>











