CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)
以下代码为线性渐变(兼容各版本):
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>线性渐变</title>
<style type="text/css">
.main{
width:100px;
height:100px;
background: -moz-linear-gradient( top,#ccc,#000);/*火狐内核写法*/
background:-webkit-linear-gradient(top,#ccc,#000);/*谷歌内核写法*/
background:-o-linear-gradient(top,#ccc,#000);/*opear内核写法*/
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#cccccc, endColorstr=#000000);/*ie内核写法*/
/*火狐、谷歌内核写法:第一个参数表示线性渐变的方向,top是从上到下、left是从左到右,如果定义成left top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。*/
/*IE依靠滤镜实现渐变:startColorstr表示起点的颜色,endColorstr表示终点颜色。GradientType表示渐变类型,0为缺省值,表示垂直渐变,1表示水平*/
</style>
</head>
<body>
<div class="main"></div>
</body>
</html>
具体可参考:http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html