<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>（重复）径向渐变-示例（含参数说明）</title>
<style type="text/css">
.common{
width: 1200px;
font-size: 15px;
color: black;
border-radius: 10px;
/* margin: 0px; */
/* padding: 0px; */
/* background-repeat: no-repeat; */
}
.commonSize{
background-size:200px 120px;
}
.radialGradient{
height: 600px;
background-image: radial-gradient(400px 30% at center, red 20%, yellow 60%, green 80%);
/* 上例中，数据释义如下
400px，椭圆的X轴半径是400px
30%，椭圆的Y轴半径是背景尺寸的30%
center，将上面的椭圆放到盒子的正中间，当center改为10px 30px时，将上面的椭圆中心放到盒子左边右侧10px，上边下方30px的地方,
20%，开始位置大于0，那么0到开始位置的颜色为开始位置的颜色
80%，结束位置小于100%，那么结束位置到100%的颜色、椭圆外的颜色为结束位置的颜色
椭圆的width = 640 = 400* 80% * 2 //2，将半径转为全径
椭圆的height = 288 = 600 * 30% * 80% * 2 */
}
.zeroRate{
height: 300px;
background-image: repeating-radial-gradient(400px 60% at center,red 20%, yellow 30%, green 45%);
/* 上例中，数据释义如下
300px，椭圆的X轴半径是300px
60%，椭圆的Y轴半径是背景尺寸的60%
center，将上面的椭圆放到盒子的正中间，当center改为10px 30px时，将上面的椭圆中心放到盒子左边右侧10px，上边下方30px的地方,
20%，第1个渐变的结束位置
45%，第2个渐变的结束位置
椭圆的width = 160 = 400* 20% * 2 //2，将半径转为全径
椭圆的height = 72 = 300 * 60% * 20% * 2 */
}
.zeroNumber{
height: 300px;
background-image: repeating-radial-gradient(400px 70% at center,red 60px,yellow 90px,green 130px);
/* 上例中，数据释义如下
400px，椭圆的X轴半径是400px
60%，椭圆的Y轴半径是背景尺寸的60%
center，将上面的椭圆放到盒子的正中间，当center改为10px 30px时，将上面的椭圆中心放到盒子左边右侧10px，上边下方30px的地方,
60px，第1个渐变的结束位置
130px，第2个渐变的结束位置
椭圆的width = 120 = 60 * 2 //2，将半径转为全径
椭圆的height = 63 = (300 * 70%) / 400 *120
*/
}
</style>
</head>
<body>
<pre class="common zeroNumber">
2/4、以下重复径向渐变，
</pre>
</body>
</html>