简介

CSS radial-gradient() 函数允许您创建以指定点为中心的径向渐变效果。您可以使用此函数创建各种效果，例如圆形或椭圆形渐变、从中心向外的渐变以及从中心向内的渐变。

语法

radial-gradient() 函数的语法如下：

radial-gradient(
  <shape>,
  <color-stop>+
)

其中：

• <shape> 指定渐变的形状。它可以是以下值之一：

  • circle: 创建一个圆形渐变。
  • ellipse: 创建一个椭圆形渐变。

• <color-stop> 指定渐变中的颜色停止。颜色停止由以下部分组成：

  • 颜色：要使用的颜色。
  • 位置：颜色将在渐变中出现的位置。位置可以是百分比（0% 到 100%）或关键字（center、closest-side、closest-corner、farthest-side、farthest-corner）。

示例

以下示例创建一个从中心向外的圆形渐变：

background: radial-gradient(circle, #ff0000 0%, #00ff00 100%);

以下示例创建一个从中心向内的椭圆形渐变：

background: radial-gradient(ellipse, #ff0000 0%, #00ff00 100%);

以下示例创建一个从中心向外渐变的圆形渐变，其中颜色在 50% 处从红色变为蓝色：

background: radial-gradient(circle, #ff0000 0%, #0000ff 50%, #00ff00 100%);

形状参数

shape 参数指定渐变的形状。您可以使用以下值：

• circle: 创建一个圆形渐变。圆形的中心点位于渐变圆心的位置。
• ellipse: 创建一个椭圆形渐变。椭圆的中心点位于渐变圆心的位置。椭圆的宽高比由 radial-gradient() 函数的第二个参数指定。

宽高比参数

对于椭圆形渐变，您还可以指定一个宽高比参数。宽高比参数是一个数字，它指定椭圆的宽度与高度之比。宽高比参数的语法如下：

radial-gradient(ellipse, <shape-size> at <center-position>, <color-stop>+)

其中：

• <shape-size> 指定椭圆的宽高比。它可以是以下值之一：

  • closest-side: 创建一个椭圆，其宽度或高度与渐变容器的最近边相匹配。
  • closest-corner: 创建一个椭圆，其宽度和高度都与渐变容器的最近角相匹配。
  • farthest-side: 创建一个椭圆，其宽度或高度与渐变容器的最远边相匹配。
  • farthest-corner: 创建一个椭圆，其宽度和高度都与渐变容器的最远角相匹配。
  • <percentage>: 指定椭圆的宽高比，以百分比表示。

• <center-position> 指定椭圆的中心点的位置。它可以是以下值之一：

  • center: 将椭圆的中心点放置在渐变容器的中心。
  • <percentage>: 指定椭圆中心点的位置，以渐变容器宽度的百分比表示。

示例

以下示例创建一个宽高比为 2:1 的椭圆形渐变，其中心点位于渐变容器的中心：

background: radial-gradient(ellipse 2:1 at center, #ff0000 0%, #00ff00 100%);

浏览器支持

radial-gradient() 函数在所有现代浏览器中都得到很好的支持，包括：

• Chrome
• Firefox
• Safari
• Edge
• Opera

结论

CSS radial-gradient() 函数是一个强大的工具，可用于创建各种径向渐变效果。通过了解函数的语法和参数，您可以创建令人惊叹的视觉效果，以增强您的 Web 应用程序和网站的外观。