一、基本介绍
CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。
1.1 语法：
linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
<angle>
用角度值指定渐变的方向（或角度）。角度顺时针增加。
<side-or-corner>
描述渐变线的起始点位置。
它包含两个关键词：第一个指出垂直位置left or right，第二个指出水平位置top or bottom。
关键词的先后顺序无影响，且都是可选的。
to top, to bottom, to left 和 to right这些值会被转换成角度0度、180度、270度和90度。
其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。
渐变线的结束点与其起点中心对称。
<color-stop>
由一个<color>值组成，并且跟随着一个可选的终点位置（可以是一个百分比值或者是沿着渐变轴的<length>）。
二、渐变角度
2.1 渐变角度定义
linear-gradient是通过渐变的角度来控制渐变的方向。渐变角度值是渐变线与渐变容器中心点向上垂直线之间的夹角。
可以通过下面两种方法来定义这个角度
- 使用关键词：to top、to bottom、to left、to right、to top right、to top left、to bottom right和to bottom left（这些值会被转换为指定的角度值）
- 使用带单位数字定义角度，比如45deg、1turn等
如果省略角度值的设置，那默认是to bottom（对应180deg或者.5turn）
2.2 顶角关键词
在使用顶角关键词时需要注意，如果你想要一个red至blue的渐变，方向是 to top right，如下图所示：
顶角关键字并不意味着渐变线穿过右上角，而是渐变线首先通过元素中心点并且与顶点垂直相交，与中心点垂直线构成指定的夹角。
三、渐变色节点
<color-stop>由一个<color>值组成，并且跟随着一个可选的终点位置（可以是一个百分比值或者是沿着渐变轴的<length>）。
3.1 颜色节点没有指定位置
如果没有显式指定颜色在渐变线上的位置，这将交给浏览器来确定颜色在渐变线上的位置。
最简单的情况下只有两个颜色，颜色1将被放置在渐变线0%位置（渐变线开始位置），颜色2将被放置在100%位置处（渐变线的结束点）。
如果有三个颜色，那么颜色1在渐变线的0%，颜色2在渐变线的50%，颜色3在渐变线的100%。
在下面的这个示例中，有五个颜色，那么它们的位置分别在0%、25%、50%、75%和100%。它们将沿着渐变线平均分布渐变颜色。
3.2 颜色节点全部指定位置
你也可以在渐变线上显式自定义渐变颜色在渐变线的位置。每个位置可以用百分比表示（相对于渐变线计算），也可以是任何一个CSS长度单位。
3.3 部分颜色节点指定位置
如果部分渐变色节点没有设置位置，那么浏览器将会根据它上一个已知的位置和下一个已知的位置，均匀的分布在这个区间内。
在上图中，只有第三个颜色yellow指定了位置，在渐变线的30%处。为了很好的分发，它把第一个颜色red放置在渐变线的0%处，最后一个颜色放置在渐变线的100%处。第二个颜色orange放置在渐变线0%至30%的中间位置，第四个颜色red放置在渐变线30%至100%中间位置。
3.4 多色变化
如果下一个颜色的开始位置是在上一个颜色结束位置，这意味着浏览器不需要填满两个颜色之余间的空间。
3.5 颜色节点位置纠正处理
如果后面颜色的位置值比前面颜色的位置值更小时，浏览器会自动做相应的纠正处理。
四、兼容性
五、linear-gradient()的使用
5.1 条纹背景
传统做法
通过背景图像平铺颜色条图片
新的思路
“如果多个色标具有相同的位置，它们会产生一个无限小的过渡区域，过渡的起止色分别是第一个和最后一个指定值。
从效果上看，颜色会在那个位置突然变化，而不是一个平滑的渐变过程。”
-- CSS图像（第三版）
-
根据linear-gradient()如果下一个颜色的开始位置是在上一个颜色结束位置，这意味着浏览器不需要填满两个颜色之余间的空间，可以创建2条颜色条纹；
-
然后通过background-size设置其尺寸；
-
最后由于背景默认情况下是重复平铺的，水平条纹就会被填满整个背景。
body{
background: linear-gradient(#fb3 50%, #58a 0);
background-size: 100% 30px;
}
扩展-斜向条纹背景
body{
background: linear-gradient(45deg,
red 25%, blue 0,blue 50%,
red 0, red 75%, blue 0);
background-size: 50px 50px;
}
5.2 网格背景
传统做法
通过背景图像平铺图片
新的思路
首先通过linear-gradient()创建水平和垂直白线；
然后将二者叠加起来。
body {
background: #58a;
background-image:
linear-gradient(white 1px, transparent 0),
linear-gradient(90deg, white 1px, transparent 0);
background-size: 30px 30px;
}
5.3 棋盘背景
传统做法
通过背景图像平铺图片。
新的思路
第一步：
首先使用linear-gradient(45deg)可以创建直角三角形；
然后将第二层渐变在水平和垂直方向均移动贴片长度的一半，就能够将2个直角三角形拼合就形成了可我们想要的方块；
body{
background-image:
linear-gradient(45deg, red 25%, transparent 0),
linear-gradient(45deg, transparent 75%, blue 0);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;
}
第二步：
body {
background-image:
linear-gradient(45deg, #666 25%, transparent 0, transparent 75%, #666 0),
linear-gradient(45deg, #aaa 25%, transparent 0, transparent 75%, #aaa 0);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;
}
以上案例示例代码：codepen.io/madman0621/…
参考：
你真的理解CSS的linear-gradient？--大漠
