在 CSS 中，radial-gradient() 函数允许您创建径向渐变作为元素的背景图像。径向渐变是从中心点向外辐射的渐变，颜色从该点以圆形或椭圆形方式向外混合。它们通常用于创建视觉上吸引人的背景效果或模仿照明和阴影。
为了创建基本的径向渐变，您需要至少两种颜色，称为色标。该函数的结果是一个对象，一种特殊的 <image>，数据类型为 <gradient>。
概述
径向渐变没有内在维度，这意味着图像没有首选尺寸或长宽比。
图像的形状可以是圆形或椭圆形。
尺寸将匹配所应用元素的大小。
只能使用 <gradient> 数据类型其中使用 <image>。
repeating-radial-gradient() 函数不能与 <color> 数据类型一起使用，并且属性，例如背景颜色。
为了创建重复的径向渐变，您需要使用 CSS 函数 repeating-radial-gradient()。
可能的值
径向渐变通过指定渐变的中心（0%）和结束形状（100%）的大小和形状来定义。函数 Radial-gradient() 可以使用以下值作为参数:
1. <position>:指定渐变的位置。当未指定值时，默认为 <center>。
2. <ending-shape>:值可以是圆（渐变为具有恒定半径的圆）或椭圆（渐变为与轴对齐的椭圆）。当没有指定值时，默认为椭圆。
3. <size>:指定渐变结束形状的大小。
未指定值时，默认为 <farthest-corner>。
该值可以显式指定或通过关键字指定。
当 <ending-shape> 以圆形形式给出时，该值可以作为 <length-percentage> 有两个值，提供椭圆尺寸；其中第一个值是水平半径，第二个值是垂直半径。百分比值与渐变框的尺寸相关。不允许使用负值。
未指定 <ending-shape> 时，渐变的形状由提供的大小决定。
一个 <length> 值指定一个圆。 <length-percentage> 中的两个值指定一个椭圆。
单个<percentage> 值无效。
渐变圆和椭圆接受各种关键字作为其大小，这些关键字在后面的部分。
4。 <linear-color-stop>:由颜色停止点的 <color> 值以及一两个可选的停止位置值组成。
停止位置值可以是 <percentage> 或 <length> 值。
值等于 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>