linear-gradient( [ <angle>| to <side-or-corner>,]? <color-stop-list>)
\---------------------------------/ \----------------------------/
Definition of the gradient line List of color stops
where <side-or-corner>= [ left | right ] || [ top | bottom ]
and <color-stop-list>= [ <linear-color-stop>[, <color-hint>? ]? ]#, <linear-color-stop>
and <linear-color-stop>= <color>[ <color-stop-length>]?
and <color-stop-length>= [ <percentage>| <length>]{1,2}
and <color-hint>= [ <percentage>
栗子:
div {
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet)
}
针对不同浏览器有不同的前缀,基本还是相似的,下面的意思是线性渐变,从上方开始,从黑色渐变到白色-webkit-linear-gradient(top,#000,#fff)
-moz-linear-gradient(top,#000,#fff)
-o-linear-gradient(top,,#000,#fff)
也可以加一些渐变中间的颜色
-webkit-linear-gradient(top,#000,#eee 20%,#fff)
也可以使用color stop,跟上面的意思相同
-webkit-linear-gradient(top,#000,color-stop(0.2, #eee),#fff)