CSS 渐变

CSS 渐变 (Gradients) 让你可以在两个或多个指定的颜色之间显示平滑的过渡。渐变实际上是 <image> 数据类型的一种，这意味着它们可以用在任何可以使用图片的地方，最常见的是 background-image 属性。

CSS 定义了两种主要的渐变类型：线性渐变 (Linear Gradients) 和 径向渐变 (Radial Gradients)。

线性渐变 (linear-gradient())

线性渐变沿着一条直线创建颜色过渡。你需要至少指定两种颜色（称为“色标”）。

语法

linear-gradient([<angle> | to <side-or-corner>], <color-stop1>, <color-stop2>, ...);

• 方向 (可选):
  • to <side-or-corner>: 可以是 to right, to left, to top, to bottom, to top right 等。
  • <angle>: 一个角度值，如 45deg。0deg 相当于 to top，90deg 相当于 to right。
  • 如果省略，默认是 to bottom。
• 色标: 颜色值，后面可以跟一个可选的位置（百分比或长度）。

示例

/* 默认从上到下的渐变 */
.gradient-1 {
  background-image: linear-gradient(blue, pink);
}

/* 从左到右的渐变 */
.gradient-2 {
  background-image: linear-gradient(to right, #ff7e5f, #feb47b);
}

/* 对角线渐变 */
.gradient-3 {
  background-image: linear-gradient(45deg, #6a11cb, #2575fc);
}

/* 包含多个色标和透明度的渐变 */
.gradient-4 {
  background-image: linear-gradient(to right, red, rgba(255, 255, 0, 0.5), blue);
}

/* 指定色标位置，创建硬朗的条纹效果 */
.gradient-5 {
  background-image: linear-gradient(to right, red 50%, blue 50%);
}

径向渐变 (radial-gradient())

径向渐变从一个中心点开始，以圆形或椭圆形向外进行颜色过渡。

语法

radial-gradient([<shape> <size> at <position>], <color-stop1>, <color-stop2>, ...);

• 形状 (可选): circle (圆形) 或 ellipse (椭圆，默认)。
• 大小 (可选): 定义渐变结束的形状大小。可以是关键字（closest-side, farthest-side, closest-corner, farthest-corner）或具体的长度/百分比。
• 位置 (可选): 使用 at 关键字定义渐变的中心点，类似于 background-position。
• 色标: 与线性渐变相同。

示例

/* 默认从中心开始的椭圆渐变 */
.radial-1 {
  background-image: radial-gradient(red, yellow, green);
}

/* 圆形渐变 */
.radial-2 {
  background-image: radial-gradient(circle, white, #6dd5fa, #2980b9);
}

/* 改变渐变中心位置 */
.radial-3 {
  background-image: radial-gradient(circle at top left, magenta, cyan);
}

/* 创建一个“太阳”效果 */
.radial-4 {
  background-color: #0072ff;
  background-image: radial-gradient(circle at 20% 20%, #ffffff 0%, #0072ff 40%);
}

重复渐变

repeating-linear-gradient() 和 repeating-radial-gradient() 函数可以创建重复的渐变图案。你需要为色标指定明确的位置，浏览器会重复这个模式来填充整个背景。

.repeating-gradient {
  background-image: repeating-linear-gradient(
    45deg,
    #d4fc79,
    #d4fc79 10px,
    #96e6a1 10px,
    #96e6a1 20px
  );
}

渐变是纯 CSS 实现复杂、美观背景的强大工具，无需使用任何图像文件。