CSS：linear-gradient()背景颜色线性渐变，前端面试宝典

作者：System 时间：2024年08月10日分类：所有,css 字数：548

CSS linear-gradient() 函数用于创建一个线性渐变背景。它允许您指定两种或多种颜色，这些颜色沿着一条直线过渡。

以下是一个简单的例子，它创建了一个从顶部(蓝色)到底部(红色)的线性渐变背景：




.gradient-background {
  background-image: linear-gradient(blue, red);
}

如果你想要更复杂的渐变，可以指定不同的颜色和渐变的方向。例如，从左到右渐变（从绿色到黄色）：




.gradient-background {
  background-image: linear-gradient(to right, green, yellow);
}

还可以在渐变中包含多个颜色点：




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

这些样式可以直接应用于任何HTML元素，并提供视觉上的效果。