CSS |径向梯度（）函数

CSS径向梯度函数可以创建一个圆形或椭圆形的渐变背景。在使用径向渐变时，需要设置两个不同的颜色值，在不同的位置上带有不同的透明度，并且需要定义梯度的中心点和形状。

语法

径向梯度函数的语法如下：

background: radial-gradient(shape size at position, start-color, ..., last-color);

参数说明：

• shape：渐变形状，可以是“circle”（圆形）或“ellipse”（椭圆形），默认值为“ellipse”。
• size：渐变的大小，可以设置渐变大小，可以是具体的值（px、rem等）、百分数或者“cover”或“contain”等关键词。
• at：渐变的中心点位置，可以设置为“bottom left”、“100% 100%”等，如果不设置，默认值为“center center”。
• position：定义颜色的位置，可以设置为像素值或者百分数值。
• start-color、...、last-color：表示渐变开始、中间和结束的颜色，可以是具体的颜色值或者是渐变的关键字如“to right”。

实例

下面的例子演示了如何创建一个从红色到蓝色的径向渐变的背景。

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

在上面的例子中，默认设置了“ellipse”椭圆形的渐变形状和“center center”为渐变中心点。

如果需要创建一个正圆形的渐变，可以将形状设置为“circle”，同时在size中使用关键字“cover”：

background: radial-gradient(circle at center, red, blue);

在上面的例子中，将中心点设置为“center”，表示渐变中心点在元素的中心。同时，将渐变形状设置为“circle”，使渐变形状变成了正圆，再使用关键字“cover”让正圆填满整个元素。

下面的例子演示了如何创建一个从红色到蓝色、有两个中间色值的径向渐变的背景。

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

![径向梯度例子3][3]

在上面的例子中，定义了四个颜色值，可以使渐变中间出现更多的过渡颜色。

[3]: https://img-blog.csdnimg.cn/20210915230505123.png