对于正常的渐变背景，一般都是切丝然后平铺，至于横向平铺还是纵向平铺还是得看实际情况而定，复杂点的背景就只能切块图，然而CSS3可以让Firefox 和Safari/Chrome实现颜色渐变，IE可以用滤镜，这也是一种值得考虑的很酷的方法。
    css3颜色渐变在Youtube上的视频http://www.youtube.com/watch?v=9D2hyM5SSCE

    moz颜色渐变语句：

    -moz-linear-gradient( [
<point> || <angle>,]? <stop>, <stop> [, <stop>]* )；

即：

   -moz-linear-gradient(top, red, blue); 

   其中top可以理解为正上方的一个点point，写为50% 0，-moz-linear-gradient(50% 0
, red, blue);也可以
理解为一个角度angle,写为-90deg, -moz-linear-gradient(-90deg, red, blue);


   这两句与上面那句实现的效果是一样的；

   后面两个颜色值可以用red, 也可以用十六进制#f00写法，表示起始颜色与结束颜色；



   webkit颜色渐变语句：

   

   -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)；

即：

   -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue)); 

   其中linear表示线性渐变，与moz不同的是它写在了函数里面，不过webkit又对其进行修改，可以跟moz一样写在外面：-webkit-linear-gradient(top, red, blue); 

   其实我觉得旧的写法条理很清晰，而且可以定终端的点，上面的linear表示类型，是线性的渐变（可以是放射性radial）,(0 0)表示左上角为起点(注：可用left top代替)，（0 100%）表示左下角为终点(注：可用left bottom代替)
，然后从red颜色过渡到blue颜色.



   color-stop:

   一、上面的渐变是有起点到终点100%渐变的，那如果要红色只占8%的比例，蓝色占92%的比例该怎么办？

   background: -moz-linear-gradient(top
, red, blue 8%); 

   background: -webkit-gradient(linear, 0 0, 0 8%, from(red), to(blue));

   则背景色会从0%到8%由红色到蓝色线性渐变，8%到100%为纯蓝色blue.



   二、那又如果，红色跟蓝色之间不渐变，直接切断，则从0%到8%为纯红色，8%到100%为纯蓝色该怎么办？

   background: -moz-linear-gradient(top
, red 8%, blue 8%); 

   background: -webkit-gradient(linear, 0 8%, 0 8%, from(red), to(blue));

   这时候你会发现只有moz的会按照你想象的去渐变，但是webkit这句无效，蓝色不见了，如果硬要用这种写法去切断两种颜色的话，前面写成（0 7.99%）即可。



   这个是我在看这个网站http://mollar.me/的时候发现的，它的菜单背景用css写出来的，圆角+背景渐变，类似PS渐变叠加模拟玻璃质感的高反光做法，很赞.....



   三、要不然就用这种下面这种添加颜色：

   background: -moz-linear-gradient(top, #dedede, white 8%, red 20%);

   background: -webkit-gradient(linear, 0 0, 0 100%, from(red), color-stop(8%, red), color-stop(8%, blue);

   color-stop可以用来添加颜色，让渐变不单只是两种颜色更绚丽，同时，如果颜色百分比一样的话，就切断颜色，从而实现（二）的效果。试试下面这个：

background:-webkit-gradient(linear,0% 0%,100% 0%,from(rgba(255,255,255,0.7)),color-stop(0.5,rgba(255,255,255,0.2),color-stop(0.5,rgba(255,255,255,0)),to(rgba(255,255,255,0.1))) #2A8BBE;



   IE渐变： 

filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000'); 


   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ff0000')"; 

   用滤镜来处理渐变。



   文章为原创，参考文章http://www.qianduan.net/understand-the-css3-gradient.html