CSS线性渐变linear-gradient

线性渐变是多种颜色沿着一条直线即渐变线过渡。
发生渐变依靠渐变线和色标，其中渐变线来控制发生渐变的方向，色标包括颜色值和位置来控制渐变的色彩变化。
创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。

/* 从上到下，蓝色渐变到红色 */ 
linear-gradient(blue, red);

渐变线

渐变线从渐变框中心向两个方向进行拓展，起点和终点是渐变线与经过渐变框的一个角的垂直线的相交点

渐变的第一个参数用于指定渐变线，默认是to bottom。有两种方式指定渐变线方向

• 1.使用角度
  0deg表示沿着元素的中心线由下向上的方向(类似于y轴)，且正角度表示顺时针旋转。

2.使用关键字

to top -> 0deg
to right -> 90deg
to bottom -> 180deg
to left -> -90deg(或270deg)
to top left -> -45deg(或315deg)
to top right -> 45deg
to bottom left -> -135deg(或225deg)
to bottom right -> 135deg

使用多个颜色节点

background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);

使用透明度（transparent）

CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。

为了添加透明度，我们使用 rgba() 函数来定义颜色节点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。
transparent表示rgba(0,0,0,0)全透明黑色。

background: linear-gradient(to right, blue, transparent,red);

色标

浏览器对于色标并没有默认值，且必须设置至少两个色标。色标由颜色和位置组成。颜色使用任何一种颜色模式都可以，而位置可以使用百分比或数值。
【1】必须是颜色在前，位置在后。
【2】位置可以省略，浏览器默认会把第一个颜色的位置设置为0%，把最后一个颜色的位置设置为100% 。
【3】若渐变只有两种颜色，且第一个颜色的位置设置为n%，第二个颜色的位置设置为m%。则浏览器会将0%-n%的范围设置为第一个颜色的纯色，n%-m%的范围设置为第一个颜色到第二个颜色的过渡，m%-100%的范围设置为第二个颜色的纯色

background: linear-gradient(black 50%, blue);

【4】若渐变颜色没有指定位置，则它们会均匀分布
【5】若多色占据同一个位置，例a、b、c三色均占据n%这一位置，则0%-n%为前一种颜色与a颜色的颜色渐变；然后是n%-n%的a颜色与c颜色的颜色突变；n%-100%是c颜色与后一种颜色的颜色渐变。因此，中间的b是无用的

重复渐变

重复渐变可以实现线性渐变的重复效果，使色标在渐变线方向上无限重复。
只有当首尾两颜色位置不在0%或100%时，重复渐变才生效，而且两个颜色的位置不可以相等，后面要比前面的数值大

background: repeating-linear-gradient(red 10%, yellow 30%);

拓展