本篇教程探讨了CSS3渐变的相关内容，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

渐变线

渐变线从渐变框中心向两个方向进行拓展，起点和终点是渐变线与经过渐变框的一个角的垂直线的相交点。
渐变的第一个参数用于指定渐变线，默认是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准专有的滤镜语法来实现兼容

本文由职坐标整理发布，更多相关内容，请关注职坐标WEB前端HTML5/CSS3频道！