[文章来源：http://www.cnblogs.com/gaoxue/articles/CSS3Gradient-1.html]
?
因方便在firefox中测试，根据原文简单总结一下Mozilla内核的线性渐变用法(径向渐变暂时忽略)，其他内核浏览器的渐变（webkit-old,webkit-new,opera,Trident）用法都差不多，请参考原文.
?
在Mozilla内核中使用 -moz-linear-gradient 属性来完成渐变效果,-moz-linear-gradient 属性 需要 3个参数：
渐变方向 ｜ 起始颜色 ｜ 终止颜色(可以指定多种颜色)
?
关于 渐变方向 的示例如下：
?
<!DOCTYPE html>
<html>
<head>
<style>
div{
color : #305999;
width : 380px;
height : 80px;
line-height : 80px;
font-weight : bold;
text-align : center;
margin : 5px auto;
}
.g1 {
background : -moz-linear-gradient(left, #ace,#f96);
}
.g2 {
background : -moz-linear-gradient(top, #ace,#f96);
}
.g3 {
background : -moz-linear-gradient(top left, #ace,#f96);
}
.g4 {
background : -moz-linear-gradient(top right, #ace,#f96);
}
.g5 {
background : -moz-linear-gradient(0deg, #ace,#f96);
}
.g6 {
background : -moz-linear-gradient(90deg, #ace,#f96);
}
.g7 {
background : -moz-linear-gradient(180deg, #ace,#f96);
}
.g8 {
background : -moz-linear-gradient(270deg, #ace,#f96);
}
</style>
</head>
<body>
<div class="g1">left</div>
<div class="g2">top</div>
<div class="g3">top left</div>
<div class="g4">top right</div>
<div class="g5">0deg</div>
<div class="g6">90deg</div>
<div class="g7">180deg</div>
<div class="g8">270deg</div>
</body>
</html>
?
关于多颜色渐变 的示例如下：
?
<!DOCTYPE html>
<html>
<head>
<style>
div{
color : #305999;
width : 380px;
height : 80px;
line-height : 80px;
font-weight : bold;
text-align : center;
margin : 5px auto;
}
.g1 {
background : -moz-linear-gradient(left, red, blue, red, blue, red);
}
</style>
</head>
<body>
<div class="g1">left</div>
</body>
</html>
?
每个渐变颜色值都可以指定一个"停止点"(百分比/像素)，指定渐变过程中纯色的位置(未指定则各颜色均匀分布)：
?
<!DOCTYPE html>
<html>
<head>
<style>
div{
color : #305999;
width : 380px;
height : 80px;
line-height : 80px;
font-weight : bold;
text-align : center;
margin : 5px auto;
}
.g1 {
background : -moz-linear-gradient(left, red, blue 5%, red, blue 95%, red);
}
</style>
</head>
<body>
<div class="g1">left</div>
</body>
</html>
?
透明 + 透明 + 背景图片：
?
<!DOCTYPE html>
<html>
<head>
<style>
div{
width : 700px;
height : 400px;
}
.g1 {
background:-moz-linear-gradient(right, rgba(255,255,255,0.1), rgba(255,255,255,1)) ,url(gradient-img.jpg) no-repeat;
}
</style>
</head>
&l