css3 linear-gradient、transform

.gradient-box{background-image:-webkit-linear-gradient(top,#ccc,#000);
background-image:-moz-linear-gradient( top,#ccc,#000);
background-image:linear-gradient(to bottom,#ccc,#000);
background-image: -o-linear-gradient(top,#ccc, #000);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#fff, endColorstr=#000);/*IE<9>*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#cccccc, endColorstr=#000000)";/*IE8+*/}

还可以设置好几种颜色如：background-image: -webkit-gradient(linear, left top, right top, from(#ace), color-stop(0.25, #f96), color-stop(0.5, #ace), color-stop(0.75, #f96), to(#ace));

可以参考的网址：http://www.qianduan.net/understand-the-css3-gradient.html

http://www.cnblogs.com/lhb25/archive/2013/02/17/css3-linear-gradient.html

transform:参考网址：http://www.w3cplus.com/content/css3-transform