在实际应用中，渐变效果经常被用到。在CSS3之前我们通过背景图片来实现渐变效果，CSS3将会轻松实现网页渐变效果。
效果图：
代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
div.test {
height:100px;
width:400px;
/* Firefox */
background-image:-moz-linear-gradient(top, #DBDBDB, #636363);
/* Saf4+, Chrome */
background-image:-webkit-gradient(linear, left top, left bottom,
color-stop(0, #DBDBDB), color-stop(1, #636363));
/* IE */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#DBDBDB', endColorstr='#636363');
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>详解：
background-image:-moz-linear-gradient(参数1, 参数2, 参数3);
该CSS属性用于Firefox浏览器实现渐变。参数说明如下：
参数1：表示线性渐变的方向，top是从上到下、left是从左到右，如果定义成left top，那就是从左上角到右下角。
参数2：渐变起点颜色。
参数3：渐变结束颜色。注意：在渐变开始和结束颜色中还可以插入更多的参数，表示多种颜色的渐变。
/* Firefox */ background-image:-moz-linear-gradient(top, #DBDBDB, #636363);
background-image:-webkit-gradient(参数1, 参数2, 参数3, 参数4, 参数5);
该CSS属性用于Saf4+, Chrome浏览器实现渐变。参数说明如下：
参数1：表示渐变类型（type），可以是linear（线性渐变）或者radial（径向渐变）。
参数2和参数3：都是一对值，分别表示渐变起点和终点。这对值可以用坐标形式表示，也可以用关键值表示，比如 left top（左上角）和left bottom（左下角）。
参数4和参数5：分别是两个color-stop函数。color-stop函数接受两个参数，第一个表示渐变的位置，0为起点，0.5为中点，1为结束点；第二个表示该点的颜色。
/* Saf4+, Chrome */ background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #DBDBDB), color-stop(1, #636363));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='', endColorstr='', GradientType=‘’)
IE依靠滤镜实现渐变。参数说明如下：
startColorstr参数：表示起点的颜色
endColorstr参数：表示终点颜色。
GradientType参数：表示渐变类型，0为缺省值，表示垂直渐变，1表示水平渐变。
/* IE */ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#DBDBDB', endColorstr='#636363');
