. 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+*/}
You can also set several colors such as: 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));
You can refer to the URL: http://www.qianduan.net/understand-the-css3-gradient.html
Http://www.cnblogs.com/lhb25/archive/2013/02/17/css3-linear-gradient.html
Transform: Reference URL: http://www.w3cplus.com/content/css3-transform
CSS3 Linear-gradient, transform