linear-gradient()的神秘面纱

CSS linear-gradient() 函数用于创建一个表示两种或者多种颜色线性渐变的图片。其结果属于<gradient>数据类型，是一种特别的<image>数据类型。

一、线性渐变的构成

1、利用PS理解渐变的原理

我们先看看PS上的渐变，简单了解下渐变的原理：
这里写图片描述
如图所示，下面总共六个色块，代表了渐变的六种颜色，位置分别为0%、20%、40%、60%、80%、100%，位于0%位置的是起点色，位于100%位置的是终点色。

渐变的效果最关键的是渐变线的长度和角度，如图：
这里写图片描述
如图所示，黑色线条为渐变线，黑色线条和白色线条相交的点为起始点和终点，红色线条表示色彩的渐变范围，红色以内是渐变色，红色以外是单色。
我们可以像PS一样为某个色值设置具体的位置，可以是百分比或者具体的像素，那么该色值将从设定的位置开始渐变。

2、mozilla官方文档解释

线性渐变由一个轴（梯度线）定义，其上的每个点具有两种或者多种的颜色，且轴上的每个点都有独立的颜色。为了构建出平滑的渐变，linear-gradient()函数构建一系列垂直于渐变线的着色线，每一条着色线的颜色取决于与之垂直相交的渐变线上的色点。
这里写图片描述
渐变线由包含渐变图形的容器的中心点和一个角度来定义的。渐变线上的颜色值是由不同的点来定义，包括起始点、终点以及两者之间的可选的中间点（中间点可以有多个）。

起始点是渐变线上代表起始颜色值的点。起始点由渐变线和过容器定点的垂直线之间的交叉点来定义。（垂直线跟渐变线在同一象限内）

同样的，终点是渐变线上代表终点颜色值的点。终点也是由渐变线和从最近的顶点发出的垂直线之间的交叉点定义的，然而从起始点的对称点来定义终点是更容易理解的一种方式，因为终点是起点关于容器中心点的反射点。

关于起点和终点的稍微有些复杂的定义导致了一个有趣的性质，有时候被叫做不可思议的顶点效应：起点附近的点具有跟起点相同的颜色值，终点附近的点具有跟终点相同的颜色值。

不仅仅只有起点和终点的颜色值可以指定。通过提供额外的颜色中间点，web开发者可以构建在起始颜色值和终点颜色值之间的自定义更强的过渡效果，另外还可以提供多种颜色值的渐变线。

当颜色中间点的位置被隐式定义，它被放在位于它之前的点和位于它之后的点之间的中间位置处。利用<length>和<percentage>数据类型可以显示定义一个位置。

注意：
由于<gradient>数据类型系<image>的子数据类型，<gradient>只能用于<image>可以使用的地方。因此，linear-gradient()并不适用于background-color以及类似的使用<color>数据类型属性中。

二、语法

1、形式语法

linear-gradient( 
 [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
 \---------------------------------/ \----------------------------/
   Definition of the gradient line        List of color stops  

where <side-or-corner> = [left | right] || [top | bottom]
 and <color-stop>     = <color> [ <percentage> | <length> ]?

2、值

side-or-corner
描述渐变线的起始点位置。包含两个关键词：第一个指出水平位置（left 或者right），第二个指出垂直位置（top或者bottom）。关键词的先后顺序无影响，且都是可选的。 to top to bottom to left to right 这些值都会被转换成角度：0度、180度、270度和90度，其余的值会被转换成一个以顶部向中央方向为起点顺时针旋转的角度。渐变线的起始点与结束点是中心对称的。
<angle>
用角度值指定渐变的方向（或角度）。角度顺时针增加。
<color-stop>
由color值组成，并且有一个可选的终点位置（是一个沿着渐变线的percentage 或者length）。CSS渐变的颜色渲染采取了与SVG相同的规则。

三、兼容性

1、浏览器支持

这里写图片描述

2、兼容写法

.grad{
    background-color: red; /*不支持渐变的浏览器的回退方案*/
    background-image：-webkit-linear-gradient(top,red,green); /*支持chrome25和Safari6*/
    background-image：   -moz-linear-gradient(top,red,green);/*支持Firefox（3.6-15.0）*/
    background-image：     -o-linear-gradient(top,red,green);/*支持旧的opera（11.1-12.0）*/
    background-image:         linear-gradient(to bottom,red,green);/*标准语法，最新版本*/
    /**/
}

四、示例

1、45度渐变

从左下角出发，起始点为左下角，起始色是红色，右上角为终点，终点色为蓝色，中间第二色块为绿色。

background-image: linear-gradient(45deg,#fa2d39,#63e529,#0b05b5);

这里写图片描述

2、从60%的渐变线开始渐变

有时候我们并不需要一开始就出现渐变色，可能是中间的某个位置开始，比如示例的60%，那么该如何做呢？

background-image: linear-gradient(45deg,#fa2d39 60%,#63e529,#0b05b5);

这里写图片描述

3、具有多个颜色的渐变

background-image: linear-gradient(90deg,red,orange,yellow,green,cyan,blue,purple);

这里写图片描述
如果第一个颜色没有定义length或者percentage，它将包含缺省值0。如果最后一个颜色没有定义length或者percentage，它将包含缺省值100%。如果中间点没有定义length或者percentage，那么它将被设定为前后两边的平均值。

参考链接：
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient