废话小说，看代码
<!DOCTYPE html > <html > <head> <meta charset="utf-8"> <title>标题</title> <script type="text/javascript" src="../js/jquery-1.4.min.js"></script>
<style type="text/css">
textarea{display: block; width:500px;height:500px; margin:100px auto; }
.example {
width: 1200px;
height: 200px;
}
.example1 {
background: -webkit-linear-gradient(top,#ccc,#000);;
background: -moz-linear-gradient(top,#ccc,#000);
background: -o-linear-gradient(top,#ccc, #000);
background: linear-gradient(top,#ccc, #000);
}
.example2 {
background:-webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));/*Old gradient for webkit*/
background:-webkit-linear-gradient(left,#ace,#f96);/*new gradient for Webkit*/
background: -moz-linear-gradient(left,#ace,#f96);/*Mozilla*/
background: -o-linear-gradient(left,#ace,#f96); /*Opera11*/
}
.example3{
/* Firefox 3.6+ */
background: -moz-linear-gradient(left, #ace, #f96, #ace, #f96, #ace);
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, left top, right top, from(#ace), color-stop(0.25, #f96), color-stop(0.5, #ace), color-stop(0.75, #f96), to(#ace));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(left, #ace, #f96, #ace, #f96, #ace);
/* Opera 11.10+ */
background: -o-linear-gradient(left, #ace, #f96, #ace, #f96, #ace);
}
</head> <body>
<div class="example example1">线性渐变在Mozilla有三个参数，第一个参数表示线性渐变的方向，top是从上到下、left是从左到右，如果定义成left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。</div>
<div class="example example2"></div>
<div class="example example3"></div>
<textarea style="">
CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。而我们今天主要是针对线性渐变来剖析其具体的用法。
目前的几种现代浏览器的内核，
Mozilla（Gecko）（熟悉的有Firefox，Flock等浏览器）、
WebKit （熟悉的有Safari、Chrome等浏览器）、
Opera(presto) （Opera浏览器）、
Trident （讨厌的IE浏览器）
</textarea>
</body>
</html>