CSS linear-gradient() 函数

定义和用法

CSS linear-gradient() 函数用于创建作为背景的线性渐变。

要创建线性渐变，必须定义至少两个色标。色标是您希望在其间实现平滑过渡的颜色。您还可以设置起点和方向（或角度）以及渐变效果。

线性渐变示例：

实例

例子 1

这个线性渐变从顶部开始。它从红色过渡到黄色，再到蓝色：

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

亲自试一试

例子 2

一个从左开始的线性渐变。它从红色过渡到蓝色：

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

亲自试一试

例子 3

一个从左上角开始（并延伸到右下角）的线性渐变：

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

亲自试一试

例子 4

一个指定了角度的线性渐变：

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

亲自试一试

例子 5

一个包含多个色标的线性渐变：

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

亲自试一试

例子 6

一个具有两个位置色标的线性渐变：

#grad {
  background: linear-gradient(
    to right,
    red 17%,
    orange 17% 34%,
    yellow 34% 51%,
    green 51% 68%,
    blue 68% 84%,
    indigo 84%
  );
}

亲自试一试

例子 7

一个具有透明度的线性渐变：

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

亲自试一试

CSS 语法

linear-gradient(side-or-corner, angle, color-stop1, color-stop2, ...);

技术细节

浏览器支持

表格中的数字表示首个完全支持该函数的浏览器版本。

相关页面

教程：CSS 渐变

参考：CSS background-image 属性

参考：CSS conic-gradient() 函数

参考：CSS radial-gradient() 函数

参考：CSS repeating-conic-gradient() 函数

参考：CSS repeating-linear-gradient() 函数

参考：CSS repeating-radial-gradient() 函数