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

实例代码：

 <!doctype html>

 <html lang="en">

     <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 class="parent">

         </div>

     </body>

 </html>

chrome浏览器效果：

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

gradient兼容性处理：

 .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:垂直渐变。

总结：至此完成IE9以及以下IE浏览器gradient兼容性处理。

gradient渐变IE兼容处理的更多相关文章

  1. gradient 线性渐变 浏览器兼容

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=white, endColorstr= ...

  2. CSS3 Gradient 渐变

    转载自:http://www.w3cplus.com/content/css3-gradient CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE, ...

  3. ie6+7+8等对background-color:rgba(),background-img渐变的兼容

    一,ie8兼容rgba()的解决办法 今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不是难题,只需要给这个div设置如下的属性即可: background: rgba(255, ...

  4. CSS-背景渐变的兼容写法

    background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%); background-image: - ...

  5. CSS 3 属性学习 —— 1. Gradient 渐变

    CSS3 中渐变分为: 线性渐变(linear-gradient)和径向渐变(radial-gradient)两种. 1. 线性渐变 参数:  <linear-gradient> = li ...

  6. CSS gradient渐变之webkit核心浏览器下的使用以及实例

    一.关于渐变 渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方.例如,您可以指定一个这么一个渐变:顶部的颜色是红色 ...

  7. ie 9 渐变背景色兼容问题

    /*窗口背景*/  .window {    background-color: #fff;    background: -webkit-linear-gradient(top,#EFF5FF 0, ...

  8. gradient 渐变

    看了大漠 写的关于 Gradient 的文章,我也想写点以便加深记忆. 首先gradient 分为linear-gradient (线性渐变) 和 radial-gradient(径向渐变),渐变是作 ...

  9. CSS gradient渐变之webkit核心浏览器下的使用

    一.关于渐变 渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方.例如,您可以指定一个这么一个渐变:顶部的颜色是红色 ...

随机推荐

  1. Hadoop-2.x启动HDFS和YARN的方式

    逐一启动(实际生产环境中的启动方式) * sbin/hadoop-daemon.sh start|stop namenode|datanode|journalnode * sbin/yarn-daem ...

  2. Chrome 插件集锦

    原文出处:CN_Simo 子曾曰:"工欲善其事,必先利其器.居是邦也."--语出<论语·卫灵公>:其后一百多年,荀子也在其<劝学>中倡言道:"吾尝 ...

  3. asp.net权限认证：OWIN实现OAuth 2.0 之授权码模式（Authorization Code）

    asp.net权限认证系列 asp.net权限认证:Forms认证 asp.net权限认证:HTTP基本认证(http basic) asp.net权限认证:Windows认证 asp.net权限认证 ...

  4. Got minus one from a read call异常

    Caught: java.sql.SQLException: Io 异常: Got minus one from a read call使用JDBC连接Oracle时,多次出现上述错误,后来去网上找了 ...

  5. Swift 2.2 协议和代理

    一:代理 两个类之间的传值,类A调用类B的方法,类B在执行过程中遇到问题通知类A,这时候我们需要用到代理(Delegate). 比如:控制器(Controller)与控制器(Controller)之间 ...

  6. 学习ui-router

    ui-router的学习 在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的.Angular原始的路由机制靠ngRoute提供,通过hash和history来实现的,可以检测浏览器是否支 ...

  7. Monit：开源服务器监控工具

    Monit是一个跨平台的用来监控Unix/linux系统(比如Linux.BSD.OSX.Solaris)的工具.Monit特别易于安装,而且非常轻量级(只有500KB大小),并且不依赖任何第三方程序 ...

  8. lazy ideas in programming

    lazy形容词,懒惰的,毫无疑问是一个贬义词.但是,对于计算机领域,lazy却是非常重要的优化思想:把任务推迟到必须的时刻,好处是避免重复计算,甚至不计算.本文的目的是抛砖引玉,总结一些编程中的laz ...

  9. vue路由表（简单）

    import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter) const first = { template: ...

  10. 随手小记（es6）

    在学习前辈阮一峰大神写的<ECMAScript入门>一书的过程中,第九章中讲到对象扩展时,第一条我就有点看不懂 ES6允许直接写入变量和函数,作为对象的属性和方法.这样的书写更加简洁. v ...