自我总结，欢饮拍砖.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
#div1{ width:300px; height:300px; border: 1px solid black;}
.gradient{
background:-webkit-linear-gradient(top,#FFFFFF,#d33027); /*以webkit浏览器引擎为基础的浏览器可以识别:chrome,opera , safari*/
background:-moz-linear-gradient(top,#FFFFFF,#d33027); /*支持火狐浏览器*/
background:-ms-linear-gradient(top,#FFFFFF,#d33027); /*支持ie10及ie以上版本*/
background:linear-gradient(top,#FFFFFF,#d33027);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#FFFFFF, endColorstr=#d33027)"; /*支持ie8,9*/
+background:#eca7a3; /*ie6,,ie7不支持，则取中间色*/
}
</style>
</head>
<body>
<div id="div1" class="gradient"></div>
</body>
</html>
参考自：梦想天空 http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html
![龙珠训练营task04[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)