这是我参与8月更文挑战的第25天，活动详情查看：8月更文挑战
在昨天的文章中：clip-path的一个重要的函数path所引入的曲线绘制问题我们提到，可以通过radial-gradient绘制曲线，那么如何实现这一目的的，今天我们来扩展阐述学习一下。
初步认识radial-gradient
radial-gradient，MDN官方释义：
radial-gradient()CSS函数创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成。它的形状可以是圆形（circle）或椭圆形（ellipse）。这个方法得到的是一个CSS<gradient>数据类型的对象，其是<image>的一种。
语法规则：
radial-gradient(circle at center, red 0, blue, green 100%)
表示： A gradient at the center of its container, starting red, changing to blue, and finishing green
TALK IS CHEAP, SHOW ME THE CODE!
话不多说，上代码：
<!DOCTYPE html>
<title>radial-gradient学习</title>
<body>
<div class="box">
radial-gradient(circle at center, red 0, blue, green 100%);
</div>
</body>
<style>
.box {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: bold;
width: 500px;
height: 500px;
background: radial-gradient(circle at center, red 0, blue, green 100%);
}
</style>
</html>
上述代码为基础代码，后续我们的变化也会基于此进行绘制。
初步效果如下所示：
几个参数的变换效果如下列的图：
- (1)圆心位置变化
(2)圆心位置变化：
size参数变化：
- 颜色变化：
回忆另外一个渐变函数linear-gradient
记得我们阐述过另外一个与颜色过渡有关的函数，linear-gradient：纯CSS输出渐变色背景图案 | linear-gradient，
类似linear-gradient可以绘制某个颜色的直线，我们也可以通过radial-gradient绘制曲线。
曲线绘制
先来一个简单的：
如上图所示，我们通过调节圆心位置，尺寸大小，过渡颜色，就可以绘制曲线了。并且background允许多个radial-gradient参数，即可以绘制多条曲线。
代码如下：
<!DOCTYPE html>
<title>radial-gradient学习</title>
<body>
<div class="box1">
background: radial-gradient(circle at center, transparent 0%, transparent 30%, black 30%, black 31%, transparent 31%, transparent 100%),
radial-gradient(circle at top 0 left 0, transparent 0%, transparent 30%, black 30%, black 31%, transparent 31%, transparent 100%),
radial-gradient(circle at top 0 left 100px, transparent 0%, transparent 30%, black 30%, black 31%, transparent 31%, transparent 100%);
</div>
</body>
<style>
body {
display: flex;
flex-direction: row;
font-weight: bold;
}
div {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 500px;
height: 500px;
margin: 20px;
border: 1px solid black;
}
.box1 {
background: radial-gradient(circle at center, transparent 0%, transparent 30%, black 30%, black 31%, transparent 31%, transparent 100%),
radial-gradient(circle at top 0 left 0, transparent 0%, transparent 30%, black 30%, black 31%, transparent 31%, transparent 100%),
radial-gradient(circle at top 0 left 100px, transparent 0%, transparent 30%, black 30%, black 31%, transparent 31%, transparent 100%);
}
</style>
</html>
