CSS-径向渐变-圆形-渐变色调由中心点向四周扩散radial-gradient
需要实现的效果
代码实现：
.colorbg1{
display:block;
width: 400rpx;
height:400rpx;
border-radius: 100%;
box-shadow: 0 0 300rpx #e8fefd;
position: absolute;
top: 0;
left:0;
background-image: radial-gradient(circle,#e8fefd,#fcfdff);
}
.colorbg2{
display:block;
width: 400rpx;
height:400rpx;
border-radius: 100%;
box-shadow: 0 0 300rpx #d6e8ff;
position: absolute;
top: 30%;
right:0;
background-image: radial-gradient(circle,#d6e8ff,#fcfdff);
}
一、径向渐变
径向渐变（radial-gradient）：指从一个中心点开始沿着四周产生渐变效果。
语法：
background：radial-gradient（起始方向，颜色1，颜色2，…）;
background：-webkit-radial-gradient（left，red，blue）;（兼容性）
background：-webkit-radial-gradient（circle center，red，blue）;（方向）
设置形状：
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 500px;
height: 500px;
border-radius: 50%;
margin: 100px auto;
background: -webkit-radial-gradient(circle, red, black);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果：
二、重复的径向渐变
repeating-radial-gradient() 函数用于重复径向渐变
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 500px;
height: 500px;
border-radius: 50%;
margin: 100px auto;
background: repeating-radial-gradient(circle at center, black 0, black 7%, red 7%, red 14%, yellow 14%, yellow 21%, blue 21%, blue 28%, rgb(255, 0, 98) 28%, rgb(255, 0, 98) 35%, rgb(195, 0, 0) 35%, rgb(195, 0, 0) 42%, green 42%, green 49%, yellow 49%, yellow 56%, blue 56%, blue 64%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果：
备注：径向渐变参考转载于：https://ispacesoft.com/121011.html
