根据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. android 获取日期

    */ public static HashMap<String, String> computeDate(){ Calendar cal =Calendar.getInstance(); ...

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

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

  3. OC基础了解篇

    .h文件存放声明 .m文件存放实现(支持c语言和OC的混编) .mm文件存放实现 (支持OC就和C++的混编) 异常处理,很少被用到/** *#import功能与#include功能一样就是包含文件 ...

  4. 内功心法 -- java.util.ArrayList<E> (5)

    写在前面的话:读书破万卷,编码如有神--------------------------------------------------------------------下文主要对java.util ...

  5. C# 6 与 .NET Core 1.0 高级编程 - 38 章 实体框架核心（上）

    译文,个人原创,转载请注明出处(C# 6 与 .NET Core 1.0 高级编程 - 38 章 实体框架核心(上)),不对的地方欢迎指出与交流. 章节出自<Professional C# 6 ...

  6. Swift 2.0 单例的用法

    单例我们项目中是很常用的,今天刚学了在swift中怎么写单例和调用单例.下面我们简单的介绍一下.我们先看看Swift单例的写法: import UIKit class Shareinstance: N ...

  7. javascript判断浏览器类型与版本

    转自 司徒正美博客: http://www.cnblogs.com/rubylouvre/archive/2009/10/14/1583362.html

  8. 丘吉尔，最后一次演讲-Never Give Up

    丘吉尔一生最精彩的演讲,也是他最后一次演讲.在剑桥大学的一次毕业典礼上,整个会堂有上万个学生,他们正在等待丘吉尔的出现.正在这时,丘吉尔在他的随从陪同下走进了会场并慢慢走向讲台,他脱下他的大衣交给随从 ...

  9. Windows编程坐标系统概念

    Windows编程中关于设置映象模式的四个函数 SetWindowOrgSetViewPortOrgSetMapModeSetWindowExtExSetViewPortExtEx 一.Windows ...

  10. Zigbee折腾之旅：（一）CC2530最小系统

    最近在倒腾Zigbee,准备参加物联网全国大赛,学校有给我们发Zigbee开发板,但是对于喜欢折腾的我来说,用开发板还是不过瘾,起码也得知道怎么去画一块板子.于是乎,在百度一番后就有了下面这篇文章. ...