<!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. idea 集成sonarLint

    1.目标 idea集成sonar的代码检查,实现可以在提交代码前就检查你的代码,而不是将代码提交之后,之后再去检查. Sonar可以从以下七个维度检测代码质量,而作为开发人员至少需要处理前5种代码质量 ...

  2. C字符串输入输出函数

    下面就几个常用的字符串输入输出函数做个小小的总结TAT 使用时添加头文件:#include<stdio.h>. scanf("格式控制字符串",变量地址列表):(pri ...

  3. Jax-ws 开发webService ,并使用spring注入service类

    由于使用myeclipse自动生成的Delegate,所以在使用service实现层的时候,默认创建的时候都是使用new的方法: 这样就导致每一次请求过来都得new一个新的:如果service有注入其 ...

  4. sql server 2008 数据库管理系统使用SQL语句创建登录用户详细步骤

    --服务器角色:--固定服务器角色具有一组固定的权限,并且适用于整个服务器范围. 它们专门用于管理 SQL Server,且不能更改分配给它们的权限. --可以在数据库中不存在用户帐户的情况下向固定服 ...

  5. c#常用方法和类

    1.  数据类型转换函数 Convert.ToXXX(); XXX.Parse(); XXX.TryParse(); 2. 日期相关的类与函数 获取系统当前日期(含时间):DateTime.Now 获 ...

  6. Spark机器学习之协同过滤算法

    Spark机器学习之协同过滤算法 一).协同过滤 1.1 概念 协同过滤是一种借助"集体计算"的途径.它利用大量已有的用户偏好来估计用户对其未接触过的物品的喜好程度.其内在思想是相 ...

  7. day_1 练习2

    #!/usr/bin/env python# -*- coding:utf-8 -*-'''b. 功能要求: v = 2000 要求用户输入总资产,例如:2000 显示商品列表,让用户根据序号选择商品 ...

  8. Python实现脚本锁功能，同时只能执行一个脚本

    1. 文件锁 脚本启动前检查特定文件是否存在,不存在就启动并新建文件,脚本结束后删掉特定文件. 通过文件的判断来确定脚本是否正在执行. 方法实现也比较简单,这里以python脚本为例 #coding= ...

  9. 将github上的项目源码导入到eclipse中

    1.注册github帐号 在github上注册一个自己的帐号. 2.安装git插件egit 在eclipse中安装git插件egit,安装方法可以参考这篇文章: http://www.cnblogs. ...

  10. maven私服nexus搭建（windows）

    1.下载nexus 地址:https://www.sonatype.com/download-oss-sonatype 下载相应版本的zip包. 2.安装nexus 下载完成后,解压到本地任意目录. ...