根据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. mac下为gdb创建证书赋权其调试其它应用

    1 使用/Applications/Utilities/Keychain Access.app创建证书 钥匙串访问->证书助理->创建证书 给证书随笔取一个名字,身份类型"自签名 ...

  2. JS高级程序设计--笔记

    1.JS分三个部分:ECMAScript.DOM.BOM       1)ECMAScript:提供核心语言功能       2)DOM:提供访问和操作网页内容的方法和接口       3)BOM:提 ...

  3. MySQL 存储表情字符

    摘要 在 MySQL 中直接存储表情的时候,会出现无法插入数据的错误. 这是由于一般情况下,MySQL 的字符集是 utf8,而对于 emoji 表情的 mysql 的 utf8 字符集是不支持,需要 ...

  4. [JQuery]serialize()和serializeArray()

    1.serialize()把表单的值序列化成字符串 <html> <head> <script src="http://libs.baidu.com/jquer ...

  5. .bat文件设置IP、DNS

    这几天遇到个烦心事,每次开机之后都要去手动去设置一下IP地址,一大串的数字还是有点麻烦,于是就想写个批处理文件设置IP 注意:在DOS下设置IP时需要管理员权限运行 1.查看机子设置IP需要用到的名字 ...

  6. 初学HTML5

    Document 什么是HTML5? 首先了解html:html即超文本语言,这是一种语法简单.结构清晰的语 解析型文档,他不同于其他的编程语言. html5就是html网页标记语言的第五次重大更新产 ...

  7. Omi教程-通讯通讯攻略大全

    组件通讯 Omi框架组建间的通讯非常遍历灵活,因为有许多可选方案进行通讯: 通过在组件上声明 data-* 传递给子节点 通过在组件上声明 data 传递给子节点 (支持复杂数据类型的映射) 父容器设 ...

  8. intellij IDEA mybatis插件破解方法

    1>安装mybatis插件,找到mybatis_plus.jar包的位置,在C:\Users\LZHL\.IntelliJIdea2016.3\config\plugins\mybatis_pl ...

  9. （C#）xml的简单理解创建和读取

    xml知识点清理:一.文档规则 1.区分大小写. 2.属性值必须加引号(单引号.双引号都可以),一般情况下建议使用使用双引号. 3.所有标记必须有结束符号. 4.所有空标记必须关闭. 5.必须有且仅有 ...

  10. Python 接口测试（一）

    @font-face { font-family: "Times"; }@font-face { font-family: "宋体"; }@font-face ...