CSS 渐变

CSS 渐变可以实现从一种颜色平滑过度到另一种颜色的效果。CSS 定义了两种类型的渐变：线性渐变和径向渐变。CSS 渐变一般用在元素的背景上。

CSS 渐变可以实现从一种颜色平滑过度到另一种颜色的效果。CSS 定义了两种类型的渐变：

  • 线性渐变：向下、向上、向左、向右或者对角线渐变
  • 径向渐变：由中心向四周渐变

CSS 渐变一般用在元素的背景上。

CSS 线性渐变

要创建线性渐变，需要用到 linear-gradient 函数。我们可以按照预定义的方向或者任意弧度创建线性渐变。

按方向线性渐变

需要在 linear-gradient 函数中传入预定义的方向，和至少两个色标。色标就是您想要在其中呈现平滑过渡的颜色。

语法

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

方向 - 从上到下（默认值）

以下示例显示了从顶部开始的线性渐变。它从红色开始，过渡到黄色：

#grad {
  background-image: linear-gradient(red, yellow);
}

方向 - 从左到右

以下示例显示了从左侧开始的线性渐变。它从红色开始，过渡到黄色：

#grad {
  background-image: linear-gradient(to right, red, yellow);
}

方向 - 对角线

您可以通过指定水平和垂直起始位置来对角制作渐变。下面的示例显示了从左上角开始（到右下角）的线性渐变。它从红色开始，过渡到黄色。

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

按角度线性渐变

如果您想更好地控制渐变的方向，您可以使用指定的角度，而不是预定义的方向（到底部、顶部、右侧、左侧、右侧底部等）。

角度按照常见的坐标系进行定义，以向上的 Y 轴为 0 度。 因此，0 度值相当于“到顶部”，90 度相当于“向右”，180 度相当于“到底部”。

语法

background-image: linear-gradient(angle, color-stop1, color-stop2);

以下示例显示了如何在线性渐变上使用角度：

#grad {
  background-image: linear-gradient(180deg, red, yellow);
}

使用多个色标

以下示例显示了具有多个色标的线性渐变（从上到下）：

#grad {
  background-image: linear-gradient(red, yellow, green);
}

以下示例创建一个彩虹色背景渐变（从左到右）：

#grad {
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

使用透明度

CSS 渐变还支持透明度，可用于创建更炫的渐变效果。

我们使用支持透明度的 rgba() 颜色值来创建带透明度的颜色， 可到 CSS 颜色章节了解关于 RGBA 颜色的更多信息。

以下示例显示了从左侧开始的线性渐变。它开始完全透明，过渡到全红色：

#grad {
  background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}

重复线性渐变

repeating-linear-gradient() 函数用于创建重复的线性渐变。

重复线性渐变：

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

CSS 径向渐变

要创建径向渐变，需要用到 radial-gradient 函数。需要指定一个开始渐变的中心位置，还要至少定义两个色标。

语法

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

默认情况下，形状为椭圆，大小为最远的角，位置为中心。

径向渐变 - 均匀间隔的色标（这是默认设置）

以下示例显示了具有均匀间隔色标的径向渐变：

#grad {
  background-image: radial-gradient(red, yellow, green);
}

径向渐变 - 不同间距的色标

以下示例显示了具有不同间距色标的径向渐变：

#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

设置形状

shape 参数定义了形状，可以取值圆(circle)或椭圆(ellipse)。默认值为椭圆(ellipse)。

下面的例子展示了一个圆形的径向渐变：

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

使用不同大小的关键字

size 参数定义了渐变的大小。它可以取四个值：

  • closest-side: 最近的边
  • farthest-side: 最远的边
  • closest-corner: 最近的角
  • farthest-corner: 最远的角

不同半径大小的径向渐变：

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

重复径向渐变

repeating-radial-gradient() 函数用于重复径向渐变。

重复的径向渐变：

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
CSS 边框图像 CSS 阴影