CSS 径向渐变：背景模式大师班（上）

踏入 CSS 渐变世界的第一个门槛就是了解什么是径向渐变。径向渐变是一种渐变类型，它以圆形或椭圆形的方式从中心向外扩散。这意味着颜色是从一个中心点开始，然后逐渐向外过渡到另一个颜色。径向渐变通常用于创建具有焦点或中心点的背景。

要使用径向渐变函数，您需要使用 radial-gradient() 函数。radial-gradient() 函数接受多个参数，这些参数用于定义渐变的中心点、颜色停止以及渐变的形状。

径向渐变函数的基本语法如下：

radial-gradient(center-position, shape, size, start-color, ..., last-color);

• center-position ：定义渐变的中心点。您可以使用百分比、像素或（例如 center、top 或 bottom）来指定中心点。
• shape ：定义渐变的形状。您可以使用以下值之一来指定形状：circle、ellipse 或 closest-side。
• size ：定义渐变的大小。您可以使用百分比、像素或关键字（例如 closest-side）来指定大小。
• start-color ：定义渐变的起始颜色。
• last-color ：定义渐变的结束颜色。

您可以使用多个颜色停止来创建更复杂的径向渐变。颜色停止是渐变中颜色的位置。要添加颜色停止，您只需在 radial-gradient() 函数中添加另一个颜色值即可。

例如，以下 CSS 代码创建了一个从红色渐变到蓝色的径向渐变：

radial-gradient(center, circle, 50%, red, blue);

这个渐变将从红色的中心开始，然后逐渐向外过渡到蓝色的边缘。

您还可以使用关键字 closest-side 来创建从最近的边缘开始的径向渐变。例如，以下 CSS 代码创建了一个从红色的左边缘开始，然后逐渐向右过渡到蓝色的径向渐变：

radial-gradient(closest-side, circle, 50%, red, blue);

这个渐变将从红色的左边缘开始，然后逐渐向右过渡到蓝色的右边缘。

径向渐变可以用于创建各种各样的背景效果。它们特别适合用于创建具有焦点或中心点的背景。例如，您可以使用径向渐变来创建以下背景：

• 一个带有白色中心的彩色背景
• 一个带有黑色中心的模糊背景
• 一个带有图像中心的径向渐变背景

您还可以使用径向渐变来创建更复杂的背景效果。例如，您可以使用多个颜色停止来创建具有多个焦点的径向渐变。您还可以使用径向渐变来创建具有动画效果的背景。