/ css

css3笔记——渐变gradients

渐变无疑对网页的呈现有着很好的帮助,webkit最早支持渐变,随后火狐也开始支持渐变,但是语法上和webkit的不同,之后css3中也将渐变列入标准,语法与FF的相似。

之前的浏览器都不支持标准的写法,因此稍微早点的博客或者书籍都是分开描述两者的实现,但是现在webkit优化了渐变属性,而Firefox16之后也支持了标准的写法,因此本文主要讨论下css3规范中的写法。

渐变可以分为两类,线性渐变(linear)和径向渐变(radial)两种,css3渐变属性中值比较多,但是稍稍想想便可提炼出来渐变需要的值,渐变方式 ,始末点,变化着的颜色,以及颜色间的距离(步长),如果是线性渐变则还有渐变的角度。如果用过ps的渐变对此应该不难理解。 下面分别讨论线性和径向渐变。

一、线性渐变

css规范中标准的语法为:
= linear-gradient( [ [ | to ] ,]? [, ]+ )

  • 第一个值定义了线性渐变的角度,和color-stop的位置,如果省略,则为默认值 to bottom - 角度中0deg代表垂直向上,以顺时针方向旋转,则90deg代表水平向右,准确度的计算方式看图一
  • =[ left | right ] | | [ top | bottom ],to top=0deg,to right=90deg,to bottom=180deg,top left=270deg。如果为角度,如to top right,则线性渐变的渐变线垂直正交于对应角度的两个边,即渐变线为该角度的等分线(初中几何;)),此处比较复杂,看图比较直观,需要注意的是设置为 to left right之后在50%位置的颜色会从左上角覆盖到右下角,而且to top right≠45deg(如图二)
  • 其余的值便是color-stop,值为颜色 和 起始位置,其实位置值可以为百分值,或者px值,若为纯数字默认为px值。起始颜色的位置默认为0%或者0px,类比于ps中的渐变,其颜色的位置点不一定在盒子范围内,可以想象为只是元素盒子范围内的颜色被显示出来了。
[![gradient-diagram](https://oeuys8rx2.qnssl.com/wp-content/uploads/2012/11/gradient-diagram.png "gradient-diagram")](https://oeuys8rx2.qnssl.com/wp-content/uploads/2012/11/gradient-diagram.png)**图一** gradient-diagram(w3c.org)
[![gradient-linear](https://oeuys8rx2.qnssl.com/wp-content/uploads/2012/11/gradient-linear3-636x168.png "gradient-linear")](https://oeuys8rx2.qnssl.com/wp-content/uploads/2012/11/gradient-linear3.png)**图二** 左为box1,右为box2
上图效果的css代码:

.box1 { background-image: linear-gradient(45deg ,#8C0095,#008299,#5133AB) } .box2 { background-image: linear-gradient(to top right ,#8C0095,#008299,#5133AB) }

css3规范中定义的线性渐变的方向还是比较模糊,因此w3c.org页面上提到希望改进的想法:

It is expected that the next level of this module will provide the ability to define the gradient’s direction relative to the current text direction and writing-mode.

webkit的写法和标准的很接近,只是定义线性渐变方向的方式不同,当定义为角度值得时候两者呈现一样,而定义为关键词的时候,标准中更多的是从渐变结束点的角度来定义,而webkit则是从起始点来呈现,且若设置为两个关键词也没有标准中color-stop在50%位置下的呈现。

[![webkit-linear-gradient](https://oeuys8rx2.qnssl.com/wp-content/uploads/2012/11/webkit-linear-gradient-636x187.png "webkit-linear-gradient")](https://oeuys8rx2.qnssl.com/wp-content/uploads/2012/11/webkit-linear-gradient.png)**图三** 左为box1,右为box2
其css代码为:

.box1 { background-image: -webkit-linear-gradient(45deg, #8C0095,#008299 50%,#5133AB); background-image: linear-gradient(45deg ,#8C0095,#008299,#5133AB) } .box2 { background-image: -webkit-linear-gradient(top right, #8C0095,#008299,#5133AB); background-image: linear-gradient(to top right ,#8C0095,#008299,#5133AB); }

webkit还支持的写法有:

background-image: -webkit-gradient(linear , left top , left bottom ,color-stop(0.3 , #8C0095) ,color-stop(0.6 ,#5133AB), to(#008299));

二,径向渐变
= radial-gradient([ [ || ] [ at ]? , |at ,]? [ , ]+)

  • 制定了径向渐变的类型为circle(圆)或者ellipse(椭圆)如果值缺省或者为一个值得时候默认为circle,负责则为ellipse。
  • 定义了径向渐变的大小,可以精确定义或者使用关键词,缺省的情况下默认为farthest-corner。 - 关键词有closest-sede、farthest-side、closest-corner、farthest-corner(效果如下图四)。
  • 在circle的情况下,可以精确定义不接受百分值
  • 在ellipse的情况下,精确定义可以为[ | ] {2}
  • 因此扩张之后的语法可以为 = radial-gradient([ [ circle || ] [ at ]? , | [ ellipse || [ | ]{2} ] [ at ]? , |[ [ circle | ellipse ] || ] [ at ]? , |at ,]? [ , ]+)
  • 在ellipse的情况下如果宽度值接近于0,而高度值远大于宽度值,则渐变类似于水平的线性渐变,相反则呈现为垂直线性渐变
  • 定义了径向渐变中心的位置,其值和background-position相同,如果缺省,默认为center
  • 的写法与线性渐变的相似。
[![moz-radial-gradient](https://oeuys8rx2.qnssl.com/wp-content/uploads/2012/11/moz-radial-gradient1.png "moz-radial-gradient1")](https://oeuys8rx2.qnssl.com/wp-content/uploads/2012/11/moz-radial-gradient1.png)图四 左上为box3 右上为box4 左下为box5由下为box6
实例css为

.box3 { background-image: radial-gradient(farthest-corner at left top ,#8C0095,#008299 50%,#5133AB); } .box4 { background-image: radial-gradient(farthest-side at left top ,#8C0095,#008299 50%,#5133AB); } .box5 { background-image: radial-gradient(closest-corner at 40px 20px ,#8C0095,#008299 50%,#5133AB); } .box6 { background-image: radial-gradient(closest-side at 40px 20px ,#8C0095,#008299 50%,#5133AB); }

webkit下的径向渐变不知上述的size关键词,其下图代码的呈现效果中和标准中farthest-corner一样。

[![webkit-radial-gradient](https://oeuys8rx2.qnssl.com/wp-content/uploads/2012/11/webkit-radial-gradient.png "webkit-radial-gradient")](https://oeuys8rx2.qnssl.com/wp-content/uploads/2012/11/webkit-radial-gradient.png)-webkit-radial-gradient(left top , #8C0095,#008299 50%,#5133AB)
最后上述例子的[demo](http://codepen.io/yijian166/pen/cmDJK "css3-gradient")

经过测试ie10已经支持css3渐变,ie9以下的浏览器不支持css3渐变,渐变需要ie滤镜来实现,再此不做讨论。

若要考虑兼容webkit以前的版本,其语法如下:

—————————webkit浏览器以前的语法:———————————

-webkit-gradient(, [ , ]? , [ , ] ? [stop] *)

  • :定义渐变类型,linear  | radia
  • :定义 渐变的起始位置和结束位置(x轴和y轴坐标),支持数值,百分比,和关键字(top,right,bottom,left)。
  • :当为径向渐变的时候,定义渐变的长度,值为数值。
  • :定义渐变色和步长,有三个类型的值 - 开始颜色,使用from(color)来定义
  • 结束颜色,to(color)
  • 颜色步长,在实际应用中使用color-stop(value , color)来定义中间颜色的位置和颜色值,value值(数值或者百分比,取值范围0~1.0或者0%~100%)定义位置,color定义颜色。

下面是个简单的线性渐变和径向渐变的例子

.box1 { background-image: -webkit-gradient(linear , left top , left bottom , form(#008299) , to(#2672EC) , color-stop(0.3 , #8C0095) ,color-stop(0.6 ,#5133AB)); } .box1 { background-image: -webkit-gradient(radial , 100 100  ,10,200 200 ,50 , form(#008299) , to(#2672EC) , color-stop(0.3 , #8C0095)); }

———————–每篇一美图————————

[![Morning Walk](https://oeuys8rx2.qnssl.com/wp-content/uploads/2012/11/Morning-Walk1.jpg "Morning Walk")](https://oeuys8rx2.qnssl.com/wp-content/uploads/2012/11/Morning-Walk1.jpg)Morning Walk