gradient渐变IE兼容处理方法解释

来源：懂视网责编：小采时间：2020-11-27 18:52:19

gradient渐变IE兼容处理方法解释

gradient渐变IE兼容处理方法解释:根据caniuse（http://caniuse.com/#search=gradient），rgba兼容性为IE10以及以上浏览器。实例代码：<!doctype html> <html> <head> <meta charset="UTF-8" /> <titl

推荐度：

点击下载本文 文档为doc格式

导读gradient渐变IE兼容处理方法解释:根据caniuse（http://caniuse.com/#search=gradient），rgba兼容性为IE10以及以上浏览器。实例代码：<!doctype html> <html> <head> <meta charset="UTF-8" /> <titl

根据caniuse（http://caniuse.com/#search=gradient），rgba兼容性为IE10以及以上浏览器。

gradient渐变IE兼容处理方法解释

实例代码：

<!doctype html>
<html>

 <head>
 <meta charset="UTF-8" />
 <title>gradient 兼容性处理</title>
 <style type="text/css">
 * {
 margin: 0;
 padding: 0;
 }
 
 .parent {
 width: 400px;
 height: 400px;
 margin: 100px;
 font-size: 20px;
 color: #FF0000;
 border: 1px solid red;
 background: #000000;
 background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff));
 background: -webkit-linear-gradient(top, #000000 0%, #ffffff 100%);
 background: -o-linear-gradient(top, #000000 0%, #ffffff 100%);
 background: -ms-linear-gradient(top, #000000 0%, #ffffff 100%);
 background: linear-gradient(to bottom, #000000 0%, #ffffff 100%);
 }
 </style>
 </head>

 <body>
 <div>
 </div>
 </body>

</html>

chrome浏览器效果：

gradient渐变IE兼容处理方法解释

IE8浏览器效果（无渐变）：

gradient渐变IE兼容处理方法解释

rgba兼容性处理：

.parent {
 width: 400px;
 height: 400px;
 margin: 100px;
 font-size: 20px;
 color: #FF0000;
 border: 1px solid red;
 background: #000000;
 background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff));
 background: -webkit-linear-gradient(top, #000000 0%, #ffffff 100%);
 background: -o-linear-gradient(top, #000000 0%, #ffffff 100%);
 background: -ms-linear-gradient(top, #000000 0%, #ffffff 100%);
 background: linear-gradient(to bottom, #000000 0%, #ffffff 100%);
 /*关键属性设置*/
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff', GradientType=0);
 }

设置filter属性目的是上一行的透明度不起作用的时候执行，filter: progid:DXImageTransform.Microsoft.gradient是用来做渐变的，GradientType:可读写，设置或检索色彩渐变的方向：
　　1:默认值。水平渐变。
　　0:垂直渐变。