<!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. Docker aufs存储驱动layer、diff、mnt目录的区别

    Docker基础信息 首先,先查询Docker使用的后端存储.使用命令docker info,主要关注Storage Driver相关的部分. $ docker info ... Server Ver ...

  2. Mac下安装BeautifulSoup

    1.输入命令su,输入root密码,进入root用户 2.执行命令安装pip: sudo easy_install pip 详细pip介绍:http://blog.csdn.net/olanlanxi ...

  3. 2.Ubuntu16.04安装QT5.8.0

    VSCode编辑器开发CPP:http://www.cnblogs.com/dotnetcrazy/p/6661921.html 下载QT run文件(安装包),一般都是这两个下载的比较多,我这边使用 ...

  4. xml语法规则

    所有 XML 元素都须有关闭标签 在 HTML,经常会看到没有关闭标签的元素: <p>This is a paragraph <p>This is another paragr ...

  5. Web API 之SelfHost与OwinSelfHots加载外部程序

       下面就一些web api的一些基础内容进行阐述,然后就web api宿主承载中的实际业务问题进行解决 HttpController      HttpController的激活是由处于消息处理管 ...

  6. cas 代理认证配置

    注:本文转自http://www.ichatter.net/2013/03/21/385/ CAS(Central Authentication Service)框架是一个开源的单点登陆框架.最近公司 ...

  7. css grid学习材料整理

    2017-04-18 19:59:02 由浅入深: 什么是网格布局:http://www.w3cplus.com/css3/what-is-css-grid-layout.html 浏览器如何开启网格 ...

  8. 被低估的选手 - JavaFx

    被低估的选手 - JavaFx 1.MFC(Visual C++) 个人不是很喜欢这个框架,太多系统定义的东西,就像无底洞,学都学不完,这个东西需要你有比较强的记忆力,并且能融会贯通里面很多预定义的功 ...

  9. SectionIndexer 利用系统的控件，制作比较美观的侧栏索引控件

    如上图所示,右侧的索引是系统提供的,具体使用方法,请搜索: SectionIndexer 相关的资料进行开发.

  10. 用户交互式命令：read

    read命令从键盘读取变量的值,通常用在shell脚本中与用户进行交互的场合.该命令可以一次读取多个变量的值,变量和输入的值都需要使用空格隔开. 语法 read [option]... [name . ...