<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         .gradient{

             height:40px;

             background: #A56697;

             background:-moz-linear-gradient(left,#CA5A83,#7E72AB);

             background:-webkit-linear-gradient(left,#CA5A83,#7E72AB);

             background: -o-linear-gradient(left,#CA5A83,#7E72AB);

             background: -ms-linear-gradient(left,#CA5A83,#7E72AB);

             background: linear-gradient(to right, #CA5A83 %,#7E72AB %);

             filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#CA5A83', endColorstr='#7E72AB',GradientType= );

             :root .gradient{filter:none;}

         }

     </style>

 </head>

 <body>

     <div class="gradient"></div>

 </body>

 </html>

【知识点】几个常见浏览器内核和IE滤镜filter

css3 linear-gradient渐变效果及兼容性处理的更多相关文章

  1. CSS3 Gradient渐变效果

    最近看到一遍关于渐变的文章,感觉很好,只是收藏感觉太可惜了,就转载了,好好学习! CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). ...

  2. css3背景颜色渐变属性 兼容性测试基础环境为：windows系统；IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+

    css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <li ...

  3. 使用CSS3创建文字颜色渐变(CSS3 Text Gradient)

    考虑一下,如何在网页中达到类似以下文字渐变的效果? 传统的实现中,是用一副透明渐变的图片覆盖在文字上.具体实现方式可参考 http://www.qianduan.net/css-gradient-te ...

  4. css3的线性渐变效果

    1.代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...

  5. FCC---Create a Gradual CSS Linear Gradient

    Applied Visual Design: Create a Gradual CSS Linear Gradient background: linear-gradient(gradient_dir ...

  6. css3中的渐变效果

    大家好,这里是demo软件园,今天为大家分享的是css3中的渐变效果. css3中的渐变需要注意的是渐变的是图片而不是颜色,而渐变又分为两种:线性渐变与径向渐变,今天我们重点介绍的是线性渐变. 1.线 ...

  7. css3实现颜色渐变以及兼容性处理

    有时我们会看到网站上的一些图片是渐变色的,这些图片有的是ui设计出来的,有的则是直接通过css3制作出来的.下面就讲一下css3实现渐变色的方法,以及在各个浏览器上的兼容性. CSS3 Gradien ...

  8. css3实现各种渐变效果，比较适合做手机触屏版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. CSS3背景颜色渐变效果

    1.firefox浏览器: background-image: -moz-linear-gradient(top , #eef9fe, #d1ecff); 2.safari.chrome浏览器: ba ...

随机推荐

  1. redis多端口，多实例。

    本屌的redis装载/usr/local/redis了 cp    一份配置 vim  配置文件 port 修改 bind 绑定ip,默认0.0.0.0所有用户允许访问. dbfilename cac ...

  2. 简单的jquery左侧导航栏和页面选中效果

    这里是要实现导航的左侧并选中的,此功能需引用jquery 效果: 左侧导航 <div class="box"> <ul class="menu" ...

  3. UBIFS文件系统介绍

    1.  引言 UBIFS,Unsorted Block Image File System,无排序区块图像文件系统.它是用于固态硬盘存储设备上,并与LogFS相互竞争,作为JFFS2的后继文件系统之一 ...

  4. 重启mysql提示:The server quit without updating PID file问题的解决办法

    今天因为需要开启事件调度器event_scheduler,所以修改了mysql的配置文件/etc/my.cnf 就因为配置多了个分号,导致一直启动失败,如下图所示: 然后去网上搜了帖子(MySQL提示 ...

  5. SDN学习之Mininet验证OpenFlow协议版本

    最近学习如何使用mininet,但是,刚刚开始时一直无法知道如何查看OpenFlow协议的版本,通过查阅网上的资料,从SDNLAB中,学习到了如何验证,mininet自身基于OpenFlow13版本的 ...

  6. DOM4J案例详解(添加 ,查询 ,删除 ,保存)

    先看一下XML文档 <?xml version="1.0" encoding="gb2312"?> <exam> <student ...

  7. Java学习笔记——设计模式之三.装饰模式

    函数应该做一件事,做好这件事,只做这一件事. --Clean Code 装饰模式,上代码: 先定义零件类: package cn.no3.decorator.template; public abst ...

  8. IO多路复用深入浅出

    前言 从零单排高性能问题,这次轮到异步通信了.这个领域入门有点难,需要了解UNIX五种IO模型和 TCP协议,熟练使用三大异步通信框架:Netty.NodeJS.Tornado.目前所有标榜异步的通信 ...

  9. JAVA内存模型5-锁

    锁的释放-获取建立的happens before关系        锁是java并发编程中最重要的同步机制.锁除了让临界区互斥执行外,还可以让释放锁的线程向获取同一个锁的线程发送消息.下面是锁释放-获 ...

  10. 通过分析 JDK 源代码研究 TreeMap 红黑树算法实

    TreeMap和TreeSet是Java Collection Framework的两个重要成员,其中TreeMap是Map接口的常用实现类,而TreeSet是Set接口的常用实现类.虽然HashMa ...