CSS3之线性渐变

一、定义

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

概念描述

线性渐变有两线，四点需要理解

• 渐变线（梯度线）：表示渐变的方向，起始点与终点的连线
• 着色线：同象限内，垂直与渐变线的着色线，该线的颜色与着色点颜色一致
• 着色点：渐变线与着色线相交的点
• 起始点：起始点是渐变线上代表起始颜色值的点，起始点由渐变线和过容器顶点的垂直线之间的交叉点来定义
• 终点：终点是渐变线上代表最终颜色值的点，其是起始点关于容器的中心点的对称点
• 终止点：在定义渐变时，描述其颜色最终的位置点，这个点的颜色将为纯正的定义颜色

渐变线由包含渐变图像的盒子的中心和一个角度定义的，默认从上到下。

二、基本语法

linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> );
复制代码

第一个参数

第一个为可选参数，表示的是梯度线的方向，有两种可选值

0. <side-or-corner>形如 to left

由单词 to 和最多两个关键字（left，right，top，bottom）组成。第一个关键字表示水平方向，第二个表示垂直方向。不指定则默认为to bottom。

2. <angle>角度值，如0deg

方向值，0deg的值相当于指向顶部（类比 to top），延顺时针方向旋转。

其余参数

后面的参数为渐变值列表，可以为多个，每组为一个<linear-color-stop>或<color-hint>

0. <linear-color-stop>

指定颜色和终止点，终止点可为多个，格式如red 10px 20%。终止点是可选的，其单位可为像素和百分比。如果不指定则遵循一下规则

还有个特殊的值0，当终止值为0时，则会取与前一个终止值相同的值，如

linear-gradient(to right, #000 50%, #fff 0); // #fff的终止点也为50%
复制代码

2. <color-hint>

默认情况下中间点为前后两终止点的中间位置，可以通过设置一个插值来重新定义中间点。插值为像素或百分比。且在两个颜色定义之前插值只能有一个。

linear-gradient(orange, green); // 默认情况下过渡的中间点为50%的位置
linear-gradient(orange, 30%, green); // 通过插值将中间点移动到30%的位置，这样绿的会更多
复制代码

三、规则

0. 起始点颜色取值：由定义的第一个线性颜色决定，且不论其终止点定义在哪里。如下起始点颜色就为red

linear-gradient(red 30%, orange, green); // 容器的上部30%为纯红色，然后渐变到橘色，按照中间值规则65%位置为纯橘色
linear-gradient(red, orange, green); // 容器上部分起点为纯红色，且从0%位置渐变到橘色，且50%的位置为纯橘色
复制代码

2. 终点颜色取值：终点的取值由最后一个线性颜色决定。如下定义终点颜色为green

linear-gradient(red 30%, orange 60%, green);
复制代码

3. 终止点的延伸：若渐变色定义为最后一个，则其后剩余空间颜色均为该颜色。如下容器剩余的50%空间内颜色均为green

linear-gradient(red 10%, orange 30%, green 50%);
复制代码

4. 颜色渐变长度：起始点和终止点或上一个终止点和下一个终止点之间的间隔。

   • 渐变速率还由渐变长度的中间点决定，默认为渐变长度的中点，也可由<color-hint>属性自定义
   • 若定义了两个相同终止点的颜色，则会在该终止点形成一条生硬线

linear-gradient(red 30%, orange 30%, green);  // 红色和橘色是生硬的没得过渡，橘色到绿色是以65%为中间点的渐变过渡
复制代码

5. 渐变色层级：前一个渐变色的定义，会有比后一个渐变色定义更高的优先级

linear-gradient(red 40%, orange 30%); // 前40%为红色，后面全是橘色。而不是红色到30%终止！
复制代码

四、一些列子

1. 网格线

  background-image: linear-gradient(to right, transparent 9px, rgba(0, 0, 0, 0.2) 9px),
                    linear-gradient(to bottom, transparent 9px, rgba(0, 0, 0, 0.4) 9px);
  background-size: 10px 10px;
复制代码

2. 斑马线

  width: 315px;
  height: 200px;
  background-image: linear-gradient(to right, #000 50%, #fff 50%);
  background-size: 30px;
复制代码

3. 倾斜线

  width: 300px;
  height: 200px;
  background-image: linear-gradient(
    45deg,
    #cc95c0 25%,
    #dbd4b4 0 50%,
    #cc95c0 50% 75%,
    #dbd4b4 0 /* 0比较特别，会跟随上一个终止点 75% */
  );
  background-size: 50px 50px;
复制代码

五、实现

使用canvas来简单实现下，渐变的渲染规则。可见demo，左侧是canvas绘制，右侧是css，值为

  background-image: linear-gradient(red, yellow 20%, blue 60%, orange 50%, darkgreen 90%);
复制代码

并非完整版，仅实现部分规则