CSS3中渐变gradient详解

这几天看了一本HTML5的书,里面对于页面的背景使用了大量的渐变效果,因此在这里写一些关于渐变Gradient的东西。

CSS3中的Gradient有两种,分别是线性渐变(linear-gradient)和径向渐变(radial-gradient),下面分别是线性与径向渐变的效果(用Flash画的,习惯了 O(∩_∩)O哈哈~。☺)

 

首先说一下webkit的浏览器(谷歌的Chrome啊等等)

webkit下对于Gradient定义了两种方法:

  1. -webkit-linear-gradient
  2. -webkit-gradient

-webkit-linear-gradient方法定义的是线性渐变,先来个代码和效果

background:-webkit-linear-gradient(top left,#ccc,#369);

这个例子是从左上角的#ccc灰色渐变到右下角的#369蓝色,从代码中可以看出-webkit-linear-gradient的第一个参数是描述渐变方向,top指从上到下,left指从左到右,top left指的就是从左上到右下,后面的颜色值分别指的是开始和结束的颜色,当然中间可以添加很多个颜色并且能够设置颜色范围。如下面的例子

background:-webkit-linear-gradient(top left,#ccc 10%,#3f3 50%,#369);

 其它浏览器比如说FireFox或者是IE中Gradient的用法和在webkit中的-webkit-linear-gradient差不多,变得只是厂商的前缀,例如:

-moz-linear-gradient、-o-linear-gradient、-ms-linear-gradient。


接下来再说一下 -webkit-gradient

-webkit-gradient相对于-webkit-linear-gradient不同的内容就是可以设置线性渐变还是径向渐变

先说一下线性渐变:

background:-webkit-gradient(linear,center top,right bottom,from(#c33),color-stop(50%,#ccc),to(#cfc));

从上面的代码中可以看出,它的第一个参数是用来设置是线性还是径向渐变,线性渐变即为linear

第二个参数设置渐变从哪里开始,这里的值需要有两部分(x y),x就是设置水平位置,比如说left、right或者是center,而y就是用来设置垂直位置,比如说top或者bottom。

第三个参数设置渐变到哪里。之后有一个from和一个to,分别用来表示从那种颜色变换到哪一种颜色,而color-stop就是用来设置从from到to这中间的颜色。

下面再说一下设置径向渐变,也是先上代码~

background:-webkit-gradient(radial, 95 45, 15, 102 70,60, from(#c33), to(#cdc), color-stop(80%, #00b5e2));

进行径向渐变的语法为

-webkit-gradient(radial, inner_center, inner_radius, outer_center, outer_radius, / stop...)

其中inner_center代表内部中心点,径向渐变起始圆环,inner_radius代表内部半径,径向渐变起始圆,outer_center代表外部渐变结束圆的中心点,outer_radius代表外部渐变结束圆的半径。

 

posted @ 2015-07-16 20:50  EchoSoar  阅读(942)  评论(0编辑  收藏  举报