linear-gradient() 是 CSS 中的一个函数,用于创建一个线性渐变的背景图像。这意味着颜色会从一个点平滑地过渡到另一个点,沿着指定的直线方向。

语法如下:

linear-gradient(direction, color-stop1, color-stop2, ...);
  • direction 定义渐变的方向。它可以是角度(如 45deg)或预定义的关键字(如 to right, to bottom right 等)。
  • color-stop1, color-stop2, … 是渐变的颜色停止点。每个颜色停止点都可以有一个可选的位置值。

示例

  1. 基本用法
body {
  background: linear-gradient(red, yellow);
}

这会创建一个从红色到黄色的垂直渐变。

  1. 指定方向
body {
  background: linear-gradient(to right, red, yellow);
}

这会创建一个从左到右的红色到黄色的水平渐变。

  1. 使用多个颜色停止点
body {
  background: linear-gradient(red, orange, yellow, green);
}

这会创建一个从红色到橙色,再到黄色,最后到绿色的渐变。

  1. 指定颜色停止点的位置
body {
  background: linear-gradient(red 20%, yellow 80%);
}

这会在 20% 的位置开始红色,并在 80% 的位置结束黄色。在 20% 到 80% 之间,颜色会从红色平滑地过渡到黄色。

  1. 使用角度
body {
  background: linear-gradient(45deg, red, yellow);
}

这会创建一个从左下角到右上角的红色到黄色的渐变。

兼容性

linear-gradient() 在现代浏览器中都得到了很好的支持,但在一些较旧的浏览器中可能不受支持。如果你需要确保在较旧的浏览器上也能有渐变效果,可能需要使用图片或其他技巧。

总之,linear-gradient() 是一个强大的 CSS 函数,可以让你创建复杂而富有吸引力的背景效果。

04-09 08:50