CSS radial-gradient() 语法
在 CSS 中，radial-gradient() 函数用于创建径向渐变效果。相比于线性渐变，径向渐变使用频率可能会少一点。
语法：
background-image: radial-gradient(shape size at position, color-stop1, color-stop2, ...);说明：
radial-gradient() 是一个 CSS 函数，它接收以下参数。
shape（可选）：定义渐变的形状。它可以是：- ellipse（默认值）：椭圆形。
- circle：圆形。
radial-gradient(circle, red, yellow); /* 圆形渐变 */
radial-gradient(ellipse, red, yellow); /* 椭圆形渐变 */size（可选）：定义渐变的大小。它可以是：- 长度值（如 100px）。
- 百分比值（如 50%）。
- 关键字：比如 closest-side（最近的边缘），farthest-side（最远的边缘），closest-corner（最近的角），farthest-corner（最远的角）。
radial-gradient(closest-side, red, yellow); /* 渐变的范围到最近的边缘 */color-stop1, color-stop2, ...（颜色停止点）：这些是渐变中的颜色值及其位置。我们可以指定多个颜色并控制它们在渐变中的分布。位置值可以是百分比或长度，如果省略位置，颜色会均匀分布。
radial-gradient(circle, red, yellow, green); /* 从红色渐变到黄色，再到绿色 */
radial-gradient(ellipse, red 30%, yellow 60%, green); /* 按百分比定义颜色的位置 */对于 radial-gradient() 函数，小伙伴们还要注意以下几点。
- 形状（shape）和大小（size）是可选的：默认情况下，渐变的形状为椭圆，大小为 farthest-corner（最远角落）。如果需要不同形状或大小，可以显式设置它们。
- 渐变的中心点：at position 允许你自定义渐变的中心点。如果不设置位置，则渐变会从默认中心开始。
- 多个颜色停止点：我们可以使用多个颜色停止点来创建更加复杂的渐变效果。
注意: radial-gradient() 只能作为 background 或 background-image 的值，而不能作为 background-color 的值。
CSS radial-gradient() 摘要
| 属于 | CSS 函数 |
|---|---|
| 使用频率 | 中 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS radial-gradient() 示例
接下来，我们通过几个简单的例子来讲解一下 CSS radial-gradient() 函数是如何使用的。
示例 1：radial-gradient() 实现径向渐变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 200px;
border-radius: 50%; /* 使其成为圆形 */
background-image: radial-gradient(red, yellow);
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
radial-gradient(red, yellow) 表示创建一个从红色（red）平滑过渡到黄色（yellow）的圆形径向渐变。
由于没有指定形状、大小和位置，所以形状默认是椭圆，大小默认为 farthest-corner，而中心点默认位于元素的中心。
示例 2：radial-gradient() 指定渐变形状和大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div:nth-child(1) {
width: 300px;
height: 150px;
background-image: radial-gradient(circle, red, yellow);
margin-bottom: 10px;
}
div:nth-child(2) {
width: 300px;
height: 150px;
background-image: radial-gradient(ellipse farthest-corner at top left, red, yellow);
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
第 1 个 div 使用了 circle 形状关键字，这样会创建一个圆形渐变。而第 2 个 div 使用了形状为 ellipse、大小为 farthest-corner、位置为 at top left，这样会创建一个从左上角开始的椭圆渐变。
示例 3：radial-gradient() 使用多个颜色停止点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 200px;
border-radius: 50%;
background-image: radial-gradient(green, yellow 30%, orange 60%, red);
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
radial-gradient(green, yellow 30%, orange 60%, red) 表示使用了 4 个颜色停止点：
- green 在开始处。
- yellow 在 30% 的位置。
- orange 在 60% 的位置。
- red 在结束处。
最终，会创建一个具有多种颜色的圆形渐变效果。
示例 4：radial-gradient() 使用不同的尺寸关键字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
margin-bottom: 10px;
}
div:nth-child(1) {
background-image: radial-gradient(closest-side, red, yellow);
}
div:nth-child(2) {
background-image: radial-gradient(farthest-side, red, yellow);
}
div:nth-child(3) {
background-image: radial-gradient(closest-corner, red, yellow);
}
div:nth-child(4) {
background-image: radial-gradient(farthest-corner, red, yellow);
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
不同的 size 值，会导致渐变的大小不一样。其中：
closest-side：渐变结束于最近的边（圆形碰到最近的边就停止）。farthest-side：渐变结束于最远的边。closest-corner：渐变结束于最近的角。farthest-corner（默认值）：渐变结束于最远的角，这通常能确保渐变填满整个容器。
