使用CSS 3来实现渐变效果，其实和使用图像处理软件中的渐变工具没有什么区别。首先指定一个渐变的方向、起始颜色和结束颜色，具有这3个参数就可以制作出一个最简单、最普通的渐变效果。

相对于其他的CSS 3属性的语法而言，CSS 3线性渐变的语法要复杂许多。在早期的各种不同核心的浏览器中CSS 3线性渐变语法不尽相同，特别是在Webkit核心的浏览器中还分为新旧两种版本。接下来分别介绍不同核心浏览器中CSS 3线性渐变的语法。

1．Webkit核心浏览器中CSS 3线性渐变语法

Webkit是第一个支持 CSS 3渐变的浏览器引擎，不过其语法也比其他核心的浏览器要复杂，还分为新旧两个不同的版本。

（1）Webkit核心浏览器旧版本语法格式如下。

-webkit-gradient(<type>,<point>,<point>,from(<color>),to(<color>) [,color-stop(<percent>, <color>)]*)

Webkit核心旧版本语法中各参数说明如下表所示。

Webkit核心旧版本线性渐变语法的示例如下。

-webkit-gradient(linear,left top,left bottom,from(#FFF),to(000))

（2）Webkit核心浏览器新版本语法格式如下。

-webkit-linear-gradient([<point> || <angle>,]?<color>[,(<color>[<percent>]?)]*,<color>)

Webkit核心新版本语法中各参数说明如下表所示。

Webkit核心新版本线性渐变语法的示例如下。

-webkit-linear-gradient(top,#FFF,#000)

2．Gecko核心浏览器中CSS 3线性渐变语法

Gecko核心的浏览器Firefox在3.6版本开始支持CSS 3中的线性渐变属性。Gecko核心与Webkit核心的新版本渐变语法格式基本相同，只是使用的私有属性前缀不同。

Gecko核心的线性渐变语法格式如下。

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

在Gecko核心的线性渐变中共有3个参数，第一个参数表示线性渐变的方向，例如top是从上至下、left是从左至右，如果定义成“left top”，就是从左上角至右下角。第2个和第3个参数分别是起点颜色和终点颜色，还可以在它们之间插入更多的颜色参数，表示多种颜色的渐变。

Gecko核心线性渐变的示例如下。

-moz-linear-gradient(top,#FFF,#000)

3．Presto核心浏览器中CSS 3线性渐变语法

Presto核心的Opera浏览器在11.6版本开始支持CSS 3的线性渐变。在Presto核心浏览器中CSS 3线性渐变的使用语法与Gecko核心浏览器中的线性渐变语法基本相同，只是使用的私有属性前缀不同。

Presto核心的线性渐变语法格式如下。

-o-linear-gradient([<point> || <angle>,]?<color>[,(<color>[<percent>]?)]*,<color>)

-o-linear-gradient语法中的参数与前面介绍的-moz-linear-gradient中的参数是完全相同的，这里不再重复介绍。

4．Trident核心浏览器中CSS 3线性渐变语法

Trident核心的浏览器主要是IE浏览器，早期版本的IE浏览器是不支持CSS 3线性渐变属性的，不过在IE 10开始支持这个属性。这里主要针对IE 10及以上版本的IE浏览器的CSS 3线性渐变进行简单的介绍。

Trident核心的线性渐变语法格式如下。

-ms-linear-gradient([<point> || <angle>,]?<color>[,(<color>[<percent>]?)]*,<color>)

-ms-linear-gradient语法中的参数与前面介绍的-moz-linear-gradient中的参数是完全相同的，这里不再重复介绍。

5．W3C标准线性渐变语法

W3C组织于2012年4月发布了CSS 3线性渐变的候选人推荐版本，这一次发布的CSS 3渐变属性有很大的化，使用语法较前面的版本要简单。目前许多现在浏览器都已经开始支持W3C的标准线性渐变语法。

W3C标准线性渐变语法格式如下。

linear-gradient([[<angle> || to <side-or-corner>],]?<color-stop>[,<color-stop>]+)

W3C标准线性渐变语法中包含三个主要的参数，第一个参数用于指定渐变的方向，同时决定渐变颜色的停止位置，这个参数值可以省略，当省略时其取值为to bottom。决定渐变的方向主要有两种方法。

 <angle>：通过角度来确定渐变的方向。

 关键词：通过关键词来确定渐变的方向。例如“to top”、“to right”、“to bottom”和“to left”。这些关键词对应的角度值为0deg、90deg、180deg和270deg。除了使用“to top”、“to left”之外，还可以使用“top left”右上角至左下角，“top right”左上角至右下角。

第二个和第三个参数表示渐变起始点和结束点的颜色，也可以从中插入更多的颜色值，从而形成多种颜色的渐变效果。