<!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. Select()和SelectMany()的区别

    Select与SelectMany的区别 Select() 和 SelectMany() 的工作都是依据源值生成一个或多个结果值. Select() 为每个源值生成一个结果值.因此,总体结果是一个与源 ...

  2. Apache Ranger对HDFS的访问权限控制的原理分析（一）

    介绍 Aapche Ranger是以插件的形式集成到HDFS中,由Ranger Admin管理访问策略,Ranger插件定期轮询Admin更新策略到本地,并根据策略信息进行用户访问权限的判定.Rang ...

  3. PPT素才搜索简谈

    PPT已经是大部分公司工作汇报.培训.年度总结等不可缺少的办公软件.下面介绍一些关于PPT素才搜索的方法. 第一:模板    1.搜索大法--filetype:对应的文档格式 在关键词后添加这样一段文 ...

  4. mysql导入导出sql文件(包括数据库和数据表的操作)

    废话不多说直接开始. 在windows命令行下登录mysql,创建一个test_01数据库,创建一个user表,并插入一条数据,如下 一.导出数据库test_01 1.退出数据库,在命令行中输入 my ...

  5. 基于jQuery的自定义插件：实现整屏分页转换的功能

    动态创建jQuery插件 一.实现功能: 1.基本功能:自适应式整屏分页功能的实现 2.通过鼠标点击标签页转换分页,支持键盘上下左右键的转换分页,同样支持 鼠标滚轮上下滑动转换分页 3.切屏时的动画效 ...

  6. poj1751最小生成树

    The island nation of Flatopia is perfectly flat. Unfortunately, Flatopia has a very poor system of p ...

  7. C++接口的定义与实现的详细过程

    1.接口的定义与实现 所谓的接口,即将内部实现细节封装起来,外部用户用过预留的接口可以使用接口的功能而不需要知晓内部具体细节.C++中,通过类实现面向对象的编程,而在基类中只给出纯虚函数的声明,然后在 ...

  8. OC中Foundation框架之NSString、NSMutableString

    创建方式 )直接赋值 NSString *str =@"abc"; )创建对象 NSString *str2 = [[NSString alloc]init]; str2 =@&q ...

  9. OpenStack Newton版本Ceph集成部署记录

    2017年2月,OpenStack Ocata版本正式release,就此记录上一版本 Newton 结合Ceph Jewel版的部署实践.宿主机操作系统为CentOS 7.2 . 初级版: 192. ...

  10. ConcurrentHashMap源码解析

    转自:http://www.iteye.com/topic/344876 ConcurrentHashMap是Java 5中支持高并发.高吞吐量的线程安全HashMap实现. 实现原理 锁分离 (Lo ...