CSS 的 radial-gradient() 径向渐变函数（带例子）

一、CSS中的 radial-gradient() 函数：

在看这篇文章之前，最好是先理解一下CSS中的 线性渐变函数linear-gradient()，这样能刚好的理解 径向渐变函数radial-gradient() 以及它的参数用法。点击了解：CSS中的 线性渐变函数

1、定义与用法：（定义部分取自菜鸟教程）
radial-gradient() 函数用径向渐变创建" 图像 "。
径向渐变由中心点定义。
为了创建径向渐变你必须设置两个中止色。

2、实例：以下实例演示了径向渐变 - 颜色结点均匀分布：

#grad {
  background-image: radial-gradient(red, green, blue);
}

3、支持版本：CSS3

4、语法：background-image: radial-gradient( shape size at position, start-color, …, last-color );

<radial - gradient> = radial-gradient( [ [ <shape> || <size> ] [ at <position> ]?，| at <position> ，] ? <color-stop> ]+)

值	描述
shape	确定圆的类型： ellipse（默认）：指定椭圆形的径向渐变 cricle：指定圆形的径向渐变
size	定义渐变的大小，可能值： farthest-conner（默认）：指定径向渐变的半径长度为从圆心到离心最远的角 closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边 closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角 farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
position	定义渐变的位置，可能值： center（默认）：设置中间为径向渐变圆心的纵坐标值。 top：设置顶部为径向渐变圆心的纵坐标值。 bottom：设置底部为径向渐变圆心的纵坐标值。
start-color, …, last-color	用于指定渐变的起止颜色。

以上总结下来就是，radial-gradient() 参数的组成部分主要包括五大部分：形状 、大小 、圆心位置 、颜色 、颜色位置。

二、参数详解：

接下来将参数进行逐一讲解，前提我们首先定义一个200 * 150的矩形：

width: 200px; height: 150px;

1、传入颜色参数：（上面说到颜色参数至少两个或两个以上）

background: radial-gradient(red,yellow);
background: radial-gradient(red,yellow,blue);

见效果：左边为设置了红 和 黄，右边设置了红黄和蓝，效果很简单，就是一个以 矩形中心点 为 圆心，矩形宽高 为 横纵向直径，颜色由红到黄再到蓝向外渐变。

2、传入颜色位置参数： （该参数紧跟颜色值之后）

background: radial-gradient(red 0,yellow 100%);

先看一下效果：

其实这个位置参数很好理解，因为默认就是一个以 矩形中心点 为 圆心，矩形宽高 为 横纵向直径，由圆心向外渐变，这里矩形的宽为横向的直径，矩形的高为纵向的直径，我们 以矩形中心点开始 从内向外 0 ~ 100% 设置为 由红向黄色渐变。（其实和线性渐变差不太多，实在不理解建议去看一下线性渐变）

看一下下面的图更好理解：（图画的有点糙凑乎看）左侧同理也是横向从0 ~ 100% 的距离。（我们这里还没设置渐变的大小，默认为整个 矩形宽和高的大小 ，如果设置了这为我们设置的大小上去百分比距离）

3、传入渐变形状参数：
渐变形状有两种：圆（circle）和椭圆（ellipse）。例如：

background: radial-gradient(circle,red 0,yellow 100%);
background: radial-gradient(ellipse,red 0,yellow 100%);

4、传入渐变大小参数：
1、具体数值（或百分比）
除了可以像上述显示的声明渐变形状，我们可以通过传入大小参数来确定形状，例如：

background: radial-gradient(60px,red 0,yellow 100%);

此处只传入了一个大小参数，则表示该渐变形状为圆，并且，大小为60px，效果如下图：

若传入两个大小不同的参数，这表示该渐变形状为椭圆，例如：

background: radial-gradient(50% 60px,red 0,yellow 100%);

因为我们的矩形的宽为200px，所以50%为100px，相当于radial-gradient(100px 60px,red 0,yellow 100%);，也就说明我们渐变范围为矩形圆心 横向取100px作为渐变范围，纵向取60px作为渐变范围，然后 0 ~ 100%由 红 向 黄 渐变。

我们设置的60px 因为我们矩形的宽为150px，60px占150px的40%，和我们设置40%的效果是一样的。

我们也可以在声明渐变形状的同时在其后紧跟渐变大小，中间用空格隔开，例如：

background: radial-gradient(circle 60px,red 0,yellow 100%);

background: radial-gradient(ellipse 50% 60px,red 0,yellow 100%);

见效果：（效果和上面相同，只不过是可以多添加一个形状参数而已）

需要注意的是：如果渐变形状为圆形，而我们设置的渐变大小构不成圆形，或者是我们设置的大小无法确定圆的半径的时候，则改函数会失效。

2、大小声明：（大小声明共有四种）

closest-side （指定径向渐变的半径长度为从圆心到离圆心最近的边）
closest-corner （指定径向渐变的半径长度为从圆心到离圆心最近的角）
farthest-side （指定径向渐变的半径长度为从圆心到离圆心最远的边）
farthest-corner （指定径向渐变的半径长度为从圆心到离圆心最远的角）

这些参数，就是免去了我们计算或是我们自己定义渐变的大小是多少，而是帮我们直接引用了我们定义的矩形中的距离。

例如：closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边

background: radial-gradient(circle closest-side,#f00 0,#ff0 100%);

看下面的图理解一下这几个参数值：（画图水平有限，哈哈，凑乎看）

最后再看一下效果：因为我们选的是最近的边，没自定义圆心的位置，所以距离上下面的距离一样，也就是半径和圆心到上下边的长度相同，所以会呈现一个圆形的效果。

5、传入渐变圆心位置参数：

1、通过百分比的形式确定圆心的位置：

background: radial-gradient(circle farthest-side at 0 0,red 0%,yellow 100%);

效果为原因位置位于元素的左上角，半径为元素宽度的圆形渐变：（这里的0为0%，可以自定义10%、20%等等就不多说了）

2、通过方位名称确定圆心的位置：

通过center、top、bottom、left、right属性，并通过传一个值或两个值来 确定十个圆心的位置。

下面代码 和上面的效果相同，都是圆心在左上角 即： 0% 0% 的位置。

background: radial-gradient(circle farthest-side at top left,red 0,yellow 100%);

下面的是设置 圆心在正中心 和默认情况相同。

background: radial-gradient(circle closest-side at center,red 0,yellow 100%);

注意： 各个参数的书写顺序，位置参数一定要写在最后。

三、重复渐变：

虽然上面已经讲完径向渐变的五大组成部分，但是，与线性渐变一样，径向渐变也同样还存在着重复渐变，我们可以用repeating-radial-gradient()来实现。例如：

background: repeating-radial-gradient(circle at center,red 0,red 10%,yellow 10%,yellow 20%);

效果如下图所示：

其实 重复径向渐变 和 重复线性渐变 差不太多，如果不懂可以去看看 重复线性渐变的相关内容：https://blog.csdn/weixin_44296929/article/details/103068274

我其它的关于CSS的函数都有总结，而且例子很详细，如果感兴趣可以看一看，上面就是关于linear-gradient()线性渐变函数的相关内容，如果喜欢请留个赞支持一下，谢谢！

关于CSS的其它函数总结的链接分享给你们（省着你们找着麻烦）：https://blog.csdn/weixin_44296929/article/category/9468349