CSS 中的 linear-gradient() 函数用于创建一个线性渐变背景。这个函数可以应用于任何 CSS 属性，如 background-image、border-image 等。

基本语法

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

• direction: 指定渐变的方向。可以是角度（如 45deg）或方向关键词（如 to left）。
• color-stop: 定义渐变中的颜色节点。每个颜色节点由颜色值和可选的停止位置组成。

示例代码

1. 基本线性渐变

div {
    width: 200px;
    height: 200px;
    background-image: linear-gradient(to right, red, blue);
}

这段代码创建了一个从左到右的红色到蓝色的渐变背景。

2. 使用角度

div {
    width: 200px;
    height: 200px;
    background-image: linear-gradient(45deg, red, blue);
}

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

3. 多个颜色节点

div {
    width: 200px;
    height: 200px;
    background-image: linear-gradient(to bottom, red, yellow 50%, green);
}

这里，黄色在渐变的中间位置开始，直到底部。

4. 不均匀的颜色分布

div {
    width: 200px;
    height: 200px;
    background-image: linear-gradient(to right, red 20%, orange 50%, yellow 80%);
}

在这个例子中，红色开始于20%，橙色在50%，黄色在80%。

注意事项

• 浏览器兼容性: linear-gradient() 在现代浏览器中广泛支持，但在旧版浏览器中可能不支持。
• 性能考虑: 过度使用复杂的渐变可能会影响页面渲染性能。
• 可读性: 对于色弱用户，应避免使用仅通过颜色区分的信息。

通过使用 linear-gradient()，你可以为网页元素添加视觉吸引力，增强用户体验。