CSS radial-gradient() 函数

如果您想创建吸引人的背景，可以使用名为 radial-gradient() 的 CSS 函数。

radial-gradient() 是一个内置的 CSS 函数，可在两种或多种颜色之间生成平滑过渡。它将径向渐变设置为背景图像。radial-gradient() 创建一个径向效果。它可以是圆形或椭圆形。

它节省了带宽使用，并有助于减少下载时间。在径向渐变中，颜色从一个点出现，然后向外扩散。其中心点和结束形状定义了一个径向渐变，以及两个或多个颜色停止点。

语法

让我们讨论它的参数。

1. position (位置): 它定义了渐变的位置。其默认值为 center (居中)。它可以以单位 (例如 px, em 等) 或关键字 (例如 bottom, left 等) 指定。

2. shape (形状): 它定义了渐变的形状，可以是 circular (圆形) 或 elliptical (椭圆形)。如果未指定其值，则将其设置为默认值，即 ellipse (椭圆形)。

3. size (大小): 它定义了渐变的大小。它可以是长度值 (例如 60px, 2em, 45% 等)，或者它可以是以下可能值：

• farthest-corner (最远角)
• farthest-side (最远边)
• closest-corner (最近角)
• closest-side (最近边)

其默认值为 farthest-corner (最远角)。

3. [at position] (在位置): 这是一个可选部分，用于定义渐变中心的。其默认值为居中。它可以以长度值 (例如 45px, 5em, 25% 等) 或关键字 (例如 bottom, left 等) 指定。

4. [start-color, …, last-color] (起始颜色, …, 结束颜色): 它包含颜色停止点的列表，这些颜色停止点定义了渐变中的颜色及其位置。每个颜色停止点由一个颜色值后跟一个可选的停止位置组成。

CSS Radial-Gradient() 函数示例

让我们通过一些图示来理解 radial-gradient() 函数。

示例 1

在此示例中，我们将使用 radial-gradient() 函数为 HTML 元素设置椭圆形径向渐变背景。

代码

输出

如您在下面的输出中看到的，HTML 元素的背景图像被设置为椭圆形和圆形径向渐变。

示例 2

在此示例中，我们将设置 HTML 元素的径向渐变形状。

代码

输出

如您在下面的输出中看到的，背景图像被设置为圆形径向渐变。

示例 3

在此示例中，我们将 HTML 元素的径向渐变大小设置为 farthest-side (最远边)。

代码

输出

示例 4

在此示例中，我们将 HTML 元素的径向渐变大小设置为 farthest-corner (最远角)。

代码

输出

示例 5

在此示例中，我们将 HTML 元素的径向渐变大小设置为 closest-side (最近边)。

代码

输出

示例 6

在此示例中，我们将 HTML 元素的径向渐变大小设置为 closest-corner (最近角)。

代码

输出

示例 7

在此示例中，我们将 HTML 元素的径向渐变大小设置为 farthest-side (最远边)，farthest-corner (最远角)，closest-side (最近边)，和 closest-corner (最近角)。

代码

输出

浏览器支持

• Mozilla Firefox
• Microsoft Edge
• 谷歌浏览器
• Safari
• Opera

结论

在本文中，您通过示例了解了 CSS radial-gradient() 函数，您可以使用它来增强 HTML 元素的背景。