在 CSS 中，函数 radial-gradient（） 允许您创建径向渐变作为元素的背景图像。径向渐变是从中心点向外辐射的渐变，颜色从该点以圆形或椭圆形方式向外混合。它们通常用于创建视觉上吸引人的背景效果或模仿照明和阴影。
为了创建基本的径向渐变，您至少需要两种颜色，这称为色标。此函数的结果是一个对象，一种数据类型为 <gradient> 的特殊类型的 <image>。
概述
- 径向渐变没有固有尺寸，这意味着图像没有首选的大小或纵横比。
- 图像的形状可以是圆形或椭圆形。
- 该大小将与应用它的元素的大小匹配。
- <gradient>数据类型只能在使用 <image> 的地方使用。
- repeating-radial-gradient（） 函数不能与 <color>数据类型和 background-color 等属性一起使用。
- 为了创建一个自我重复的径向渐变，你需要使用CSS函数 repeating-radial-gradient（）。
可能的值
径向梯度是通过指定梯度的中心（0%）和结束形状的大小和形状（100%）来定义的。函数 radial-gradient（） 可以具有以下值作为参数：
1. <position>：指定渐变的位置。如果未指定任何值，则默认为 <center>。
2. <ending-shape>：值可以是圆（渐变为半径恒定的圆）或椭圆（梯度为轴对齐的椭圆）。如果未指定任何值，则默认为椭圆。
3. <size>：指定渐变结束形状的大小。
- 如果未指定任何值，则默认为 <farthest-corner>。
- 该值可以显式指定，也可以由关键字指定。
- 当 <ending-shape> 以圆的形式给出时，该值可以显式地作为 <length> 值传递，即圆的半径。不允许使用负值。
- 当 <ending-shape> 作为椭圆给出时，该值可以作为 <length-percentage>传递，具有两个值，提供椭圆大小;其中第一个值是水平半径，第二个值是垂直半径。百分比值是相对于渐变框的维度而言的。不允许使用负值。
- 如果未指定 <ending-shape>，则梯度的形状由提供的大小确定。
- 一个 <length> 值指定一个圆。<length-percentage>中的两个值指定一个椭圆。
- 单个 <percentage> 值无效。
- 渐变、圆圈和椭圆接受各种关键字作为其大小，这些关键字将在后面的部分中列出。
4. <linear-color-stop>：由色标的 <color> 值以及一个或两个可选的色档位置值组成。
- 止损位置值可以是 <percentage> ，也可以是<长度>值。
- 值等于 0% 或 0，表示梯度的中心。
- 值等于 100%，表示结束形状与虚拟渐变光线的交点。
5. <color-hint>：确定相邻色标之间的渐变进程。如果未指定值，则颜色过渡的中点是两个色标之间的中点。
下表列出了渐变、圆圈和椭圆接受作为其大小的关键字：
| 关键词 | 描述 |
|---|---|
| closest-side |
对于圆：渐变的结束形状与最靠近其中心的框的两侧相交。 对于椭圆：渐变的结束形状与最接近中心的垂直边和水平边相交。 |
| closest-corner |
渐变的结束形状正好与盒子离其中心最近的角相交。 |
| farthest-side |
对于圆：渐变的结束形状与框的两侧相交，最远于框的中心。 对于椭圆：渐变的结束形状与离中心最远的垂直边和水平边相交。 |
| farthest-corner |
渐变的结束形状恰好与盒子离其中心最远的角落相交。这是默认值。 |
语法
<gradial-gradient()> =
gradial-gradient( [ <ending-shape> || to <size> ]? [ at <position> ]?, <color-stop-list> )
CSS radial-gradient（） - 组成
径向渐变是两种或多种颜色沿轴的渐进过渡。它由一个中心点、一个结束形状和两个或多个色标点表示。色标放置在从中心向右水平延伸的虚拟渐变射线上。
CSS radial-gradient（） - 基本示例
让我们看一个基本径向梯度的例子：
<html>
<head>
<style>
div {
height: 150px;
width: 150px;
}
.basic-radial-gradient {
background-image: radial-gradient(red, yellow);
}
</style>
</head>
<body>
<h1>Basic radial gradient</h1>
<div class="basic-radial-gradient"></div>
</body>
</html>
CSS radial-gradient（） - 颜色停止定位
使用百分比或绝对长度值，可以定位径向渐变中的颜色停止点。让我们看一个例子：
<html>
<head>
<style>
div {
height: 150px;
width: 150px;
}
.position-radial-gradient {
background-image: radial-gradient(red 35px, yellow 25%, green 55%);
}
</style>
</head>
<body>
<h1>Position radial color stops</h1>
<div class="position-radial-gradient"></div>
</body>
</html>
CSS radial-gradient（） - 中心定位
径向梯度的中心可以使用关键术语、百分比或绝对长度值进行定位。如果只给出一个值，即长度或百分比，那么同样的值将是重复的;否则，将重复从左到右的位置和从上开始的位置顺序。让我们看一个例子：
<html>
<head>
<style>
div {
height: 150px;
width: 150px;
}
.center-gradient {
background-image:
radial-gradient(
at 0% 50%,
lightgreen 30px,
blue 60%,
magenta 20%
);
}
</style>
</head>
<body>
<h1>Radial gradient center position</h1>
<div class="center-gradient"></div>
</body>
</html>
有关 radial-gradient（） 的更多示例，请单击此处。
