深入理解Css linear-gradient线性渐变

一、渐变相关的概念

1.渐变框（gradient box）

渐变会绘制到一个叫渐变框（gradient box）的矩形框里。渐变框有具体的大小，而渐变本身是没有固有尺寸的。
举例说明：

#demo{
    width: 200px;
    height: 100px;
    padding: 10px;
    background-image: linear-gradient(red, green); /* 线性渐变 */
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid;
}

效果如下：

上述代码中，渐变框就是#demo容器Padding box，渐变框大小为宽 220px 高 120px。
但如果设置background-size，则渐变框的尺寸也会变化。同一个渐变在渐变框大小不同时呈现的效果也不同：

#demo {
	width: 200px;
    height: 100px;
    padding: 10px;
    background-image: linear-gradient(red, green); /* 线性渐变 */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 200% 200%;
    border: 1px solid;
}

效果如下：

#demo {
	width: 200px;
    height: 100px;
    padding: 10px;
    background-image: linear-gradient(red, green); /* 线性渐变 */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50px 50px;
    border: 1px solid;
}

效果如下：

补充知识点：Css的盒模型：

Content box: 
这个区域是用来显示内容，大小可以通过设置 width 和 height.

Padding box: 
包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置。

Border box: 
边框盒包裹内容和内边距。大小通过 border 相关属性设置。

Margin box:
 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

2.渐变线（梯度线）（gradient line）

在渐变容器中,穿过容器中心点和颜色停止点连接在一起的线称为渐变线（梯度线）。

3.渐变类型

在几何上，可以是：

线段（line）：对应 CSS 的线性渐变（linear gradient）
射线（ray）：对应 CSS 的径向渐变（radial gradient）
螺旋（spiral）：对应 CSS 的圆锥渐变（conic gradient）

要想指定一个渐变效果，只需定义这三个元素，即可：

4.渐变三元素

要想指定一个渐变效果，只需定义这三个元素，即可：

渐变线（gradient line）

渐变线上的起始点（starting point）和结束点（ending point）

颜色序列：在起始点到结束点上的颜色值序列（渐变线上的颜色序列），每个点上的颜色称为渐变色标。

这样，颜色就会平滑地填充渐变线上的其余部分。

5.中色点

中色点的作用是修改两侧的混合模式，即定义相邻颜色之间的渐变如何进行。默认情况下，中色点位于两个颜色终止位置之间的中点。例如，由20%处的黄色（#FC0）过渡到100%处的橙色（#F60），二者的中点位置是60%。
当指定中色点时，需要省略颜色，如下代码所示，将中色点移到40%处，渐变效果如下图的右侧所示，左侧是默认的渐变。

background: linear-gradient(30deg, #FC0 20%, #F60);

未指定中色点：

background: linear-gradient(30deg, #FC0 20%, 40% ,#F60);

指定中色点：

二、线性渐变

1.概念

线性渐变就是指定一条直直的渐变线，然后再在这条线上放置几种颜色。在这种渐变类型下，创建 2D 图像的过程是：创建一个“无限”画布，用垂直于渐变线的线条来填充它，线条的颜色就取它和渐变线交点的那个颜色。

这里的“无限”是指渐变是可以无限大的，因为它本身是没有固有尺寸的。
之所以加引号“”，是因为在实际绘制中，渐变必然是被限制在一个有具体大小的渐变框里。

线性渐变会使用linear-gradient()函数，可沿着一条渐变线（梯度线）（gradient line），从某一边或某个角度绘制渐变背景，该背景的默认方向是从元素顶部到底部。

2.linear-gradient()函数语法

线性渐变的语法是：

linear-gradient() = linear-gradient(
[ <angle> | to <side-or-corner> ]?,
<color-stop-list>)

其中，<side-or-corner> = [left | right] || [top | bottom]

linear-gradient()函数有两个参数：
第一个参数定义了渐变线。它给出了渐变线的方向，缺省是to bottom。
第二个参数定义了渐变线上的颜色序列。

3.线性渐变的渐变线（梯度线）（gradient line）

线性渐变的渐变线（梯度线）（gradient line）会穿过元素的中心点，沿顺时针旋转，如下图所示，旋转了50°。梯度线的起点是元素最近的顶点和渐变线（梯度线）的垂线的交叉点，终点是元素最远的顶点和渐变线（梯度线）的垂线的交叉点，注意，垂线和渐变线（梯度线）都要在同一象限内。象限是指平面直角坐标系中的横轴和纵轴所划分的四个区域。

渐变线（梯度线）的起点和终点

图中的0%和100%分别表示第一个和最后一个色标的位置，百分数参照的是渐变线（梯度线）的长度。注意：渐变线（梯度线）的各点颜色会沿着垂直线向外延伸，如下图所示。

结束点和起始点的位置确定规则:
1.在渐变框的中心点处，建立平面极坐标系：中心点是极点，向上的射线是极轴。
（1）当渐变线的方向是 0deg 或者 to top 时，渐变自下而上，从深粉色过渡到黄色、再过渡到柠檬绿。

（2）当渐变线的方向是 60deg 时：

（3）当渐变线的方向是 300deg 时：

2.起始点和结束点，都在渐变线上。
3.结束点位置的确定，是依据渐变方向，选择和它在同一个象限的渐变框的顶点，从它作一条垂直于渐变线的线，交点即结束点。同理，在相反方向上可确定起始点的位置。
4.当渐变线的方向是指向渐变框的某个角（corner）时，情况会稍稍复杂一些。比如，当渐变方向是to left top时，如下图：

当渐变方向是指向特定角（eg. to left top）时，渐变线的方向是：在渐变框的中心点处，做一条垂直于相邻角（left bottom和right top）连线的直线，取与指定方向（to left top）象限相同的那个方向。

明明指定的渐变方向是to left top，为什么渐变线的方向却不是指向left top的呢？其实，这是有意为之的，是为了保证让渐变颜色的50% 处恰好通过left bottom和right top这两点。

渐变线（梯度线）的方向

渐变线（梯度线）的方向可以用两种方式来指定：

（1）用：0deg 即向上，正数表示顺时针方向旋转，所以 90deg 即向右。

（2）用关键字to top, to right, to bottom, to left，对应到分别是 0deg, 90deg, 180deg, 270deg。to left top 则是指渐变框的左上象限。

渐变线（梯度线）的方向可以结合关键字to向四条边（top、bottom、left和right）延伸，默认是to bottom。下面的样式会修改成向右渐变，效果如下图所示。

background: linear-gradient(to right, #FC0, #F60);

将四条边的关键字两两组合，再与to配合使用，可声明成某个角度，例如top right表示右上象限。注意：不是右上角，也就是说，梯度线并不会穿过元素两个对角的顶点。如下图所示，to top right的梯度线是带箭头的实线而不是那条虚线。

除了使用关键字之外，还能通过deg单位指定角度，这样能更直观的改变梯度线的方向，例如30deg，如下代码所示，在声明时不需要关键字to。

background: linear-gradient(30deg, #FC0, #F60);

渐变线（梯度线）上的颜色序列

渐变线上的颜色序列是用<color-stop-list>指定的。它的语法是：

<color-stop-list> = <color-stop>#{2,}
<color-stop> = <color> <length-percentage>?

颜色的个数必须大于等于 2 个。<color-stop> 是颜色和位置的组合。

这里，需要以下几点：
（1）<length-percentage>的百分比，是针对渐变线的长度计算的(相关资料：Dig deep into CSS linear gradients)。渐变线的长度，是起始点和结束点之间的线段的长度。
（2）<length-percentage>的取值，可以是 [0%, 100%] 之外的值。
因为渐变本身是没有固有尺寸的，渐变线的两端也是可以无限延伸的，起始点和结束点只是渐变线上的两个有特殊意义的位置标识而已。
（3）颜色序列的颜色位置，取值可以在区间 [0%, 100%] 之内，也可以在其之外。

三、颜色序列中色标取值的特殊情况

如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值。因此后面色标的位置可以写成0：

background: linear-gradient(#aaa 20%, #d14444 40%,green 0);

效果如下：