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](http://hicdn.qiniudn.com/wp-content/uploads/2012/11/gradient-diagram.png "gradient-diagram")](http://hicdn.qiniudn.com/wp-content/uploads/2012/11/gradient-diagram.png)**图一** gradient-diagram(w3c.org)
[![gradient-linear](http://hicdn.qiniudn.com/wp-content/uploads/2012/11/gradient-linear3-636x168.png "gradient-linear")](http://hicdn.qiniudn.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](http://hicdn.qiniudn.com/wp-content/uploads/2012/11/webkit-linear-gradient-636x187.png "webkit-linear-gradient")](http://hicdn.qiniudn.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-corne**r(效果如下图四)。 - 在circle的情况下,可以精确定义,**不接受百分值**。 - 在ellipse的情况下,精确定义可以为[ | ] {2} - 因此扩张之后的语法可以为 = radial-gradient([ [ circle || ] [ at ]? , | [ ellipse || [ | ]{2} ] [ at ]? , |[ [ circle | ellipse ] || ] [ at ]? , |at ,]? [ , ]+) - 在ellipse的情况下**如果宽度值接近于0,而高度值远大于宽度值,则渐变类似于水平的线性渐变,相反则呈现为垂直线性渐变**。 - 定义了径向渐变中心的位置,其值和[background-position](http://blog.hicc.me/ued/2012-10-20/css3-background.html "css3笔记——增强的background属性")相同,如果缺省,默认为**center**。 - 的写法与线性渐变的相似。
[![moz-radial-gradient](http://hicdn.qiniudn.com/wp-content/uploads/2012/11/moz-radial-gradient1.png "moz-radial-gradient1")](http://hicdn.qiniudn.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](http://hicdn.qiniudn.com/wp-content/uploads/2012/11/webkit-radial-gradient.png "webkit-radial-gradient")](http://hicdn.qiniudn.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](http://hicdn.qiniudn.com/wp-content/uploads/2012/11/Morning-Walk1.jpg "Morning Walk")](http://hicdn.qiniudn.com/wp-content/uploads/2012/11/Morning-Walk1.jpg)Morning Walk

xiaodao

0

Subscribe to cc log

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!
comments powered by Disqus