htmlcss渐变及兼容性

自我总结，欢饮拍砖.

 

<!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

posted @ 2015-11-26 11:16  风巽•千叶翔龙  阅读(310)  评论(0)    收藏  举报