css color之线性linear-gradient()函数

html-css015

css color之线性linear-gradient()函数,第1张

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

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)