渐变线
渐变线从渐变框中心向两个方向进行拓展，起点和终点是渐变线与经过渐变框的一个角的垂直线的相交点。
渐变的第一个参数用于指定渐变线，默认是to bottom。有两种方式指定渐变线方向。角度和关键字。
image.png
角度和关键字
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
色标
浏览器对于色标没有默认值，且必须设置至少两个色标。色标由颜色和位置组成。颜色使用任何一种颜色模式都可以，而位置可以使用百分比或数值。
[注意]颜色的位置也可以设置负值
渐变中的 2em 折角尺寸是写在色标中的，因此它是沿着渐变轴进行度量的，是对角线尺寸。
linear-gradient(-135deg, transparent 2em, #58a 0);
在 background-size 中的 2em 长度是背景贴片的宽度和高度，是在水平和垂直方向上进行度量的
linear-gradient(to left bottom,transparent 50%, rgba(0,0,0,.4) 0) no-repeat 100% 0 / 2em 2em,
- 必须是颜色在前，位置在后
- 位置可以省略，浏览器默认会把第一个颜色的位置设置为0%，把最后一个颜色的位置设置为100%
background-image: linear-gradient(red 0%,blue 100%);
//相等
background-image: linear-gradient(red,blue);
- 若渐变只有两种颜色
background-image: linear-gradient(red m%,blue n%);
image.png
若渐变颜色没有指定位置，则它们会均匀分布
若多色占据同一个位置,例a、b、c三色均占据n%这一位置，则0%-n%为前一种颜色与a颜色的颜色渐变；然后是n%-n%的a颜色与c颜色的颜色突变；n%-100%是c颜色与后一种颜色的颜色渐变。因此，中间的b是无用的
重复渐变
重复渐变可以实现线性渐变的重复效果，使色标在渐变线方向上无限重复，实现一些特殊的效果
[注意]只有当首尾两颜色位置不在0%或100%时，重复渐变才生效
background-image: repeating-linear-gradient(blue 20%,green 50%);
多背景
使用多背景属性，利用带有透明度的渐变颜色给图片添加渐变的透明效果
background: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0.8)),url('a.gif');
在CSS样式中，渐变相当于背景图片，在理论上可在任何使用url()值的地方采用。比如最常见的background-image、list-style-image以及border-image。但目前为止，仅在背景图片中得到完美的支持。
IE9-浏览器并不支持该属性，但可以使用IE准专有的滤镜语法来实现兼容
