首先写简单的css背景左右全屏渐变色：
body{width:100%;margin: 0 auto;height:100%;min-height:300px;background:-webkit-linear-gradient(left,#9fcdf6,#497ed0) ;}
css背景上下全屏渐变色：
body{width:100%;margin: 0 auto;height:100%;background:#497ed0;}
.container{width:100%;padding-top:250px;min-height:600px;background:-webkit-linear-gradient(top,#9fcdf6,#497ed0);}
就是给最外侧的div设置渐变色并给一个padding值，一个最小高度，body设置一个背景为渐变色最后一个的颜色值。
此设置只适合线性渐变。
关于渐变色的兼容：
background: -ms-linear-gradient(top, #ee6b4e, #c34b2d); /* IE 10 */
background:-moz-linear-gradient(top, #ee6b4e, #c34b2d);/*火狐*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#ee6b4e), to(#c34b2d));/*谷歌*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ee6b4e), to(#c34b2d)); /* Safari 4-5, Chrome 1-9*/
background: -webkit-linear-gradient(top, #ee6b4e, #c34b2d); /*Safari5.1 Chrome 10+*/
background: -o-linear-gradient(top, #ee6b4e, #c34b2d); /*Opera 11.10+*/
