过去实现网页渐变效果通常依赖预定义图像，不仅加载慢且难以缩放。CSS3 提供了原生的渐变函数，能够以极低的性能开销实现平滑过渡与任意比例缩放。本文将按类型拆解线性、径向、圆锥及重复渐变的语法与参数，配合可直接运行的示例代码，帮助你在 10 分钟内掌握 CSS 渐变的核心用法。

线性渐变 linear-gradient() 语法与方向控制

线性渐变指颜色沿一条直线平滑过渡。创建线性渐变至少需要定义两个色标（即需要过渡的颜色），若需更复杂的效果可增加色标数量。基本语法如下：

linear-gradient(direction, color-stop1, color-stop2, ...);

参数说明：

• direction（可选）：定义渐变方向。可使用角度（如 90deg）或 to 加方位关键字组合。常见取值包括：
  • to left：从右到左，等效 270deg
  • to right：从左到右，等效 90deg
  • to top：从下到上，等效 0deg
  • to bottom：默认值，从上到下，等效 180deg
  • to right bottom：从左上到右下
  • to right top：从左下到右上
  • to left bottom：从右上到左下
  • to left top：从右下到左上
• color-stop1, color-stop2, ...：定义多个色标。除颜色值外，可通过数值加单位或百分比指定颜色的起止位置。

以下示例展示了不同方向与多色标的线性渐变效果：

运行结果如下图所示：

径向渐变 radial-gradient() 形状与中心点设置

径向渐变由中心点向外延伸，支持自定义中心位置与渐变形状。基本语法如下：

radial-gradient(shape size at position, color-stop1, color-stop2, ...);

参数说明：

• at：关键字，必须置于 position 参数之前。
• position：指定渐变起点坐标。支持数值加单位、百分比或关键字（如 left、bottom）。提供两个参数时分别表示横纵坐标；若仅一个参数，纵坐标默认为 50%（即 center）。
• shape：指定渐变形状，可选 circle（圆形）或 ellipse（椭圆）。
• size：指定渐变形状大小。除具体数值外，支持以下关键字：
  • closest-side：半径为圆心到最近边的距离
  • closest-corner：半径为圆心到最近角的距离
  • farthest-side：默认值，半径为圆心到最远边的距离
  • farthest-corner：半径为圆心到最远角的距离
• color-stop1, color-stop2, ...：定义色标，支持通过数值加单位或百分比指定位置。

以下示例演示了不同形状、中心点与尺寸关键字的径向渐变：

运行结果如下图所示：

圆锥渐变 conic-gradient() 旋转角度与色标定位

圆锥渐变与径向渐变类似，均有一个中心点作为色标源点，但圆锥渐变是围绕中心点旋转而非向外辐射。基本语法如下：

conic-gradient(from angle at position, start-color, ..., last-color);

参数说明：

• from：关键字，必须置于 angle 参数之前。
• angle：定义起始角度，可为空，默认值为 0deg。
• at：关键字，必须置于 position 参数之前。
• position：定义锥心坐标。支持数值加单位、百分比或关键字。提供两个参数时分别表示横纵坐标；若仅一个参数，纵坐标默认为 50%（即 center）。
• start-color, ..., last-color：定义色标，支持通过百分比或角度指定位置。

以下示例展示了不同起始角度、色标范围与单位（角度、百分比、turn）的圆锥渐变：

运行结果如下图所示：

重复渐变 repeating- 函数与平铺技巧

CSS 提供 repeating-linear-gradient()、repeating-radial-gradient() 和 repeating-conic-gradient() 函数，用于将渐变过程重复多次以铺满整个元素。这三个函数的语法分别与对应的非重复函数完全一致。

以下示例演示了三种重复渐变的使用方式，以及通过 background-size 与 background-repeat 实现平铺的替代方案：

运行结果如下图所示：