CSS3线性渐变

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')";
用滤镜来处理渐变。