CSS3 gradient简单使用
[文章来源：http://www.cnblogs.com/gaoxue/articles/CSS3Gradient-1.html]
?
因方便在firefox中测试，根据原文简单总结一下Mozilla内核的线性渐变用法(径向渐变暂时忽略)，其他内核浏览器的渐变（webkit-old,webkit-new,opera,Trident）用法都差不多，请参考原文.
?
在Mozilla内核中使用 -moz-linear-gradient 属性来完成渐变效果,-moz-linear-gradient 属性 需要 3个参数：
渐变方向 ｜ 起始颜色 ｜ 终止颜色(可以指定多种颜色)
?
关于 渐变方向 的示例如下：
?
<!DOCTYPE html> <html> <head> <style> div{ color : #305999; width : 380px; height : 80px; line-height : 80px; font-weight : bold; text-align : center; margin : 5px auto; } .g1 { background : -moz-linear-gradient(left, #ace,#f96); } .g2 { background : -moz-linear-gradient(top, #ace,#f96); } .g3 { background : -moz-linear-gradient(top left, #ace,#f96); } .g4 { background : -moz-linear-gradient(top right, #ace,#f96); } .g5 { background : -moz-linear-gradient(0deg, #ace,#f96); } .g6 { background : -moz-linear-gradient(90deg, #ace,#f96); } .g7 { background : -moz-linear-gradient(180deg, #ace,#f96); } .g8 { background : -moz-linear-gradient(270deg, #ace,#f96); } </style> </head> <body> <div name="code"><!DOCTYPE html> <html> <head> <style> div{ color : #305999; width : 380px; height : 80px; line-height : 80px; font-weight : bold; text-align : center; margin : 5px auto; } .g1 { background : -moz-linear-gradient(left, red, blue, red, blue, red); } </style> </head> <body> <div name="code"><!DOCTYPE html> <html> <head> <style> div{ color : #305999; width : 380px; height : 80px; line-height : 80px; font-weight : bold; text-align : center; margin : 5px auto; } .g1 { background : -moz-linear-gradient(left, red, blue 5%, red, blue 95%, red); } </style> </head> <body> <div name="code"><!DOCTYPE html> <html> <head> <style> div{ width : 700px; height : 400px; } .g1 { background:-moz-linear-gradient(right, rgba(255,255,255,0.1), rgba(255,255,255,1)) ,url(gradient-img.jpg) no-repeat; } </style> </head> <body> <div class="g1"></div></body> </html> ?
?
?