css渐变

常这样去定义一个渐变的div:

渐变1：（双色）
background: -moz-linear-gradient(top, #456d6c %, #32b66a %); /*适合 FF3.6+*/ background: -webkit-gradient(linear, left top, left bottom, color-stop(%,#456d6c), color-stop(%,#32b66a)); /*适合 Chrome,Safari4+*/ background: -webkit-linear-gradient(top, #456d6c %,#32b66a %); /*适合Chrome10+,Safari5.1+*/ background: -o-linear-gradient(top, #456d6c %,#32b66a %); /*适合Opera 11.10+*/ background: -ms-linear-gradient(top, #456d6c %,#32b66a %); /*适合IE10+*/ background: linear-gradient(top, #456d6c %,#32b66a %); /*适合W3C*/ 
 
渐变2：（四色）
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02eae7', endColorstr='#02ea3e', GradientType= );
  background-image: -webkit-gradient(linear,  ,  %, color-stop(%, #02eae7), color-stop(%, #02ea6f), color-stop(%, #02ea3e), color-stop(%, #f4f4f4));
  background-image: -webkit-linear-gradient(top, #02eae7 %, #02ea6f %, #02ea3e %, #f4f4f4 %);
  background-image: -moz-linear-gradient(top, #02eae7 %, #02ea6f %, #02ea3e %, #f4f4f4 %);
  background-image: -o-linear-gradient(top, #02eae7 %, #02ea6f %, #02ea3e %, #f4f4f4 %);
  background-image: linear-gradient(#02eae7 %, #02ea6f %, #02ea3e %, #f4f4f4 %);
原始：
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee', GradientType= );
  background-image: -webkit-gradient(linear,  ,  %, color-stop(%, #ffffff), color-stop(%, #f6f6f6), color-stop(%, #eeeeee), color-stop(%, #f4f4f4));
  background-image: -webkit-linear-gradient(top, #ffffff %, #f6f6f6 %, #eeeeee %, #f4f4f4 %);
  background-image: -moz-linear-gradient(top, #ffffff %, #f6f6f6 %, #eeeeee %, #f4f4f4 %);
  background-image: -o-linear-gradient(top, #ffffff %, #f6f6f6 %, #eeeeee %, #f4f4f4 %);
  background-image: linear-gradient(#ffffff %, #f6f6f6 %, #eeeeee %, #f4f4f4 %);