linear-gradient 渐变详解

1.1 概述

https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient

语法: 可以使用角度或者关键字；

• background: linear-gradient(color-stop1, color-stop2, …)
• background: linear-gradient(direction, color-stop1, color-stop2, …)
• background: linear-gradient(angle, color-stop1, color-stop2);
  

参数：

• 第一个参数:指定渐变方向，可以用“角度”的关键词或“英文”来表示：to/top、bottom、left、right

第一个参数省略时，默认为“180deg”，等同于“to bottom”。

• 第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。

1.2 浏览器支持

表格中的数字表示支持该函数的第一个浏览器版本号。

“webkit” 或 “moz” 或 “o” 指定的数字为支持该函数的第一个版本号前缀。

1.3示例

// 1、线性渐变默认是从上到下
.box1{
  background:linear-gradient(red,green);
  background:-webkit-linear-gradient(red,green);
}

// 2、从一个方向到另一个方向（to/left 、right 、bottom、top）
.box2 {
  background:linear-gradient(to left,red,green);
  background:-webkit-linear-gradient(to left,red,green);
}

// 3、对角的，两个方向可以进行组合，比如下面的就是从左上角到右下角
.box3 {
  background:linear-gradient(to left top,red,green);
  background:-webkit-linear-gradient(to left top,red,green);
}

// 4、还可以是角度
.box4 {
  background:linear-gradient(90deg,red,green);
  background:-webkit-linear-gradient(90deg,red,green);
}