css的linear-gradient属性

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 函数，可以让你创建复杂而富有吸引力的背景效果。