CSS3可以用linear-gradient()来创建渐变背景色，不用图片就可以做出来漂亮的渐变背景效果，下面青岛星网跟大家详细介绍：CSS3之linear-gradient()的用法.
<linear-gradient>：linear-gradient([ <point>,]? <color-stop>[, <color-stop>]+);
<point>：[ left | right ]? [ top | bottom ]? || <angle>?<color-stop>：
<color> [ <length> | <percentage> ]?
<point>
left：设置左边为渐变起点的横坐标值。
right：设置右边为渐变起点的横坐标值。
top：设置顶部为渐变起点的纵坐标值。
bottom：设置底部为渐变起点的纵坐标值。
<angle>：用角度值指定渐变的方向（或角度）。
<color-stop>：指定渐变的起止颜色。
<color-stop>
<color>：指定颜色。请参阅颜色值
<length>：用长度值指定起止色位置。不允许负值
<percentage>：用百分比指定起止色位置。
用线性渐变创建图像。
Firefox还支持使用<percentage>、<length>和center特殊值定义渐变起点，并支持起点与角度一起使用。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS linear-gradient()详解-青岛星网www.qdxw.net</title>
<style>
div{width:200px;height:100px;margin-top:10px;border:1px solid #ddd;}
.test{background:-moz-linear-gradient(#fff,#333);background:-webkit-gradient(linear,center top,center bottom,from(#fff),to(#333));background:-webkit-linear-gradient(#fff,#333);background:-o-linear-gradient(#fff,#333);background:-ms-linear-gradient(#fff,#333);background:linear-gradient(#fff,#333);}
.test2{background:-moz-linear-gradient(#000,#f00 50%,#090);background:-webkit-gradient(linear,center top,center bottom,from(#000),color-stop(.5,#f00),to(#090));background:-webkit-linear-gradient(#000,#f00 50%,#090);background:-o-linear-gradient(#000,#f00 50%,#090);background:-ms-linear-gradient(#000,#f00 50%,#090);background:linear-gradient(#000,#f00 50%,#090);}
.test3{background:-moz-linear-gradient(left center,#000 20%,#f00 50%,#090 80%);background:-webkit-gradient(linear,left center,right center,color-stop(.2,#000),color-stop(.5,#f00),color-stop(.8,#090));background:-webkit-linear-gradient(0deg,#000 20%,#f00 50%,#090 80%);background:-o-linear-gradient(0deg,#000 20%,#f00 50%,#090 80%);background:-ms-linear-gradient(0deg,#000 20%,#f00 50%,#090 80%);background:linear-gradient(0deg,#000 20%,#f00 50%,#090 80%);}
.test4{background:-moz-linear-gradient(45deg,#000,#f00 50%,#090);background:-webkit-gradient(linear,left bottom,right top,from(#000),color-stop(.5,#f00),to(#090));background:-webkit-linear-gradient(45deg,#000,#f00 50%,#090);background:-o-linear-gradient(45deg,#000,#f00 50%,#090);background:-ms-linear-gradient(45deg,#000,#f00 50%,#090);background:linear-gradient(45deg,#000,#f00 50%,#090);}
</style>
</head>
<body>
<div class="test"></div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"></div>
</body>
</html>
在线QQ：
