CSS中linear-gradient()

linear-gradient() 函数用于创建一个线性渐变的 “图像”。

为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色。

//语法
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

示例：

//不指定方向（以下实例演示了从头部开始的线性渐变，从红色开始，转为黄色，再到蓝色:）
#grad {
  background-image: linear-gradient(red, yellow, blue);
}

//指定方向（不指定方向是从上到下，指定方向0度是从下到上，90度是从右往左转）
#grad1 {
  height: 100px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: linear-gradient(0deg, red, yellow); 
}

#grad2 {
  height: 100px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: linear-gradient(90deg, red, yellow); 
}

#grad3 {
  height: 100px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: linear-gradient(180deg, red, yellow); 
}

#grad4 {
  height: 100px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: linear-gradient(-90deg, red, yellow); 
}

参考链接：
https://www.runoob.com/cssref/func-linear-gradient.html