CSS3 渐变

CSS 渐变

CSS 渐变允许你在两个或多个指定颜色之间显示平滑过渡，从而创建以前只能通过图片文件实现的效果。

使用 CSS 渐变代替图片可以减少下载时间和带宽使用。渐变也具有出色的缩放能力，无论放大多少倍都能保持清晰，因为它们是由浏览器生成的。

CSS 定义了几种类型的渐变：

线性渐变（Linear Gradients）： 沿直线（向下/向上/向左/向右/对角线）过渡颜色。
径向渐变（Radial Gradients）： 从中心点径向过渡颜色。
圆锥渐变（Conic Gradients）： 围绕中心点以圆锥状过渡颜色（类似于色轮或饼图）。

浏览器支持

CSS 渐变（linear-gradient、radial-gradient、conic-gradient 及其重复版本）在所有现代网页浏览器中都得到广泛支持。不再需要供应商前缀。

CSS 线性渐变

要创建线性渐变，你必须至少定义两个颜色停止点（color stops）——即你想要过渡的颜色。你还可以指定渐变的方向或角度。

基本语法：

background: linear-gradient(direction, color-stop1, color-stop2, …);

示例：从上到下（默认）

如果未指定方向，渐变默认为从上到下。

.grad-tb {
  /* Starts red at the top, transitions to blue at the bottom */
  background: linear-gradient(red, blue);
}

示例：从左到右

使用 to <side> 语法指定方向。

.grad-lr {
  /* Starts red at the left, transitions to blue at the right */
  background: linear-gradient(to right, red, blue);
}

示例：对角线

同时指定水平和垂直方向的侧边。

.grad-diag {
  /* Starts red at the top left, transitions to blue at the bottom right */
  background: linear-gradient(to bottom right, red, blue);
}

使用角度：

为了精确控制，使用角度（deg）。0deg 表示从下到上，90deg 表示从左到右，180deg 表示从上到下，依此类推（逆时针）。

.grad-angle {
  /* Gradient at a 45-degree angle */
  background: linear-gradient(45deg, red, blue);
}

多个颜色停止点：

你可以包含多种颜色。默认情况下，它们会均匀分布。

.grad-multi {
  background: linear-gradient(to right, red, orange, yellow, green, blue);
}

你还可以使用百分比或长度为颜色停止点指定位置。

.grad-multi-pos {
  /* Red up to 5%, green at 15%, blue ends at 100% */
  background: linear-gradient(to right, red 0%, yellow 30%, blue 100%);
}

使用透明度：

使用支持 Alpha 通道的颜色格式，如 rgba() 或现代的 rgb(r g b / alpha)，来创建渐隐效果。

.grad-transparent {
  /* Fades from fully transparent red to fully opaque red */
  background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
  /* Modern syntax equivalent: */
  /* background: linear-gradient(to right, rgb(255 0 0 / 0), rgb(255 0 0 / 1)); */
}

重复线性渐变：

使用 repeating-linear-gradient() 来平铺渐变图案。

.grad-repeat {
  /* Creates repeating stripes */
  background: repeating-linear-gradient(
    45deg,
    red,
    red 10px,
    blue 10px,
    blue 20px /* End color position defines the size of the repeating unit */
  );
}

CSS 径向渐变

径向渐变从中心点向外过渡颜色。你需要至少两个颜色停止点。

基本语法：

background: radial-gradient(shape size at position, start-color, …, last-color);

默认情况下，形状为 ellipse，大小为 farthest-corner，位置为 center。

示例：均匀分布的颜色（默认）

.radial-grad-even {
  /* Default: Ellipse shape, centered, red center -> green -> blue edge */
  background: radial-gradient(red, green, blue);
}

示例：不同位置的颜色停止点

.radial-grad-spaced {
  /* Red up to 5%, green at 15%, blue covers the rest to 60% */
  background: radial-gradient(red 5%, green 15%, blue 60%);
}

设置形状：

形状可以是 circle 或 ellipse（默认）。

.radial-grad-circle {
  background: radial-gradient(circle, red, yellow, green);
}

设置大小和位置：

size 参数定义渐变结束形状的大小。关键词包括 closest-side、farthest-side、closest-corner、farthest-corner（默认）。position 使用关键词（例如 center、top left）或长度/百分比（例如 60% 55%）指定。

.radial-grad-size-pos {
  /* Circle shape, ending at the closest side to the center */
  /* Centered at 60% from left, 55% from top */
  background: radial-gradient(circle closest-side at 60% 55%, blue, green, yellow, black);
}

重复径向渐变：

使用 repeating-radial-gradient() 创建同心圆重复图案。

.radial-repeat {
  /* Creates repeating concentric rings */
  background: repeating-radial-gradient(
    circle,
    red,
    red 10px,
    yellow 10px,
    yellow 20px
  );
}

CSS 圆锥渐变（简要介绍）

圆锥渐变围绕中心点过渡颜色，常用于创建饼图、色轮或带角度的效果。

.conic-grad {
  background: conic-gradient(red, yellow, green, blue, red);
}

在 MDN 上了解更多关于圆锥渐变的信息：https://developer.mozilla.org/en-US/docs/Web/CSS/conic-gradient

在 MDN 上查找完整文档：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients