css3的渐变（Gradient）

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。

首先了解一下目前的几种现代浏览器的内核，主流内容主要有Mozilla（熟悉的有

Firefox，Flock等浏览器）、WebKit（熟悉的有Safari、Chrome等浏览器）、Opera

（Opera浏览器）、Trident（讨厌的IE浏览器）（使用滤镜实现渐变，可能效果会有点）

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

 

参数：其共有三个参数，第一个参数表示线性渐变的方向，top是从上到下、left是从左

到右，如果定义成left top，那就是从左上角到右下角。第二个和第三个参数分别是起点

颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。

二.webkit 下面的的写法

 

 
-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新发布书写语法
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式语法书写规则

 

参数：-webkit-gradient是webkit引擎对渐变的实现参数，一共有五个。第一个参数表

示渐变类型（type），可以是linear（线性渐变）或者radial（径向渐变）。第二个参数

和第三个参数，都是一对值，分别表示渐变起点和终点。这对值可以用坐标形式表示，

也可以用关键值表示，比如 left top（左上角）和left bottom（左下角）。第四个和第

五个参数，分别是两个color-stop函数。color-stop函数接受两个参数，第一个表示渐

变的位置，0为起点，0.5为中点，1为结束点；第二个表示该点的颜色。

 三、线性渐变在Opera下的应用

 
-o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]); /* Opera 11.10+ */

参数：-o-linear-gradient有三个参数。第一个参数表示线性渐变的方向，top是从上到

下、left是从左到右，如果定义成left top，那就是从左上角到右下角。第二个和第三个

参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色

的渐变。（注：Opera支持的版本有限，本例测试都是在Opera11.1版本下）

四. IE 下面实现的渐变（filter）

 

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr = '#81a8cb',endColorstr = '#4477a1' );
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr = '#81a8cb',endColorstr = '#4477a1' )";}