废话小说，看代码
<!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>