css3 linear-gradient渐变效果及兼容性处理
<!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渐变效果及兼容性处理的更多相关文章
- CSS3 Gradient渐变效果
最近看到一遍关于渐变的文章,感觉很好,只是收藏感觉太可惜了,就转载了,好好学习! CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). ...
- 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 ...
- 使用CSS3创建文字颜色渐变(CSS3 Text Gradient)
考虑一下,如何在网页中达到类似以下文字渐变的效果? 传统的实现中,是用一副透明渐变的图片覆盖在文字上.具体实现方式可参考 http://www.qianduan.net/css-gradient-te ...
- css3的线性渐变效果
1.代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...
- FCC---Create a Gradual CSS Linear Gradient
Applied Visual Design: Create a Gradual CSS Linear Gradient background: linear-gradient(gradient_dir ...
- css3中的渐变效果
大家好,这里是demo软件园,今天为大家分享的是css3中的渐变效果. css3中的渐变需要注意的是渐变的是图片而不是颜色,而渐变又分为两种:线性渐变与径向渐变,今天我们重点介绍的是线性渐变. 1.线 ...
- css3实现颜色渐变以及兼容性处理
有时我们会看到网站上的一些图片是渐变色的,这些图片有的是ui设计出来的,有的则是直接通过css3制作出来的.下面就讲一下css3实现渐变色的方法,以及在各个浏览器上的兼容性. CSS3 Gradien ...
- css3实现各种渐变效果，比较适合做手机触屏版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS3背景颜色渐变效果
1.firefox浏览器: background-image: -moz-linear-gradient(top , #eef9fe, #d1ecff); 2.safari.chrome浏览器: ba ...
随机推荐
- delphi 7 mdi子窗体。。。无法更改以命令对象为源的记录集对象的 ActiveConnection 属性。
问题是这样的 我做了一个小程序 把 adoconnection放到了主窗体 连接的是access数据库; 新建了一个子窗体继承自FBase 新建了一个pubulic方法 qrySearch 实现了 ...
- Spring多种加载Bean方式简析
1 定义bean的方式 常见的定义Bean的方式有: 通过xml的方式,例如: <bean id="dictionaryRelMap" class="java.ut ...
- Java设计模式之（工厂模式）--简单工厂模式--工厂方法模式--抽象工厂模式
工厂模式: 工厂模式可以分为三类: 1)简单工厂模式(Simple Factory) 2)工厂方法模式(Factory Method) 3)抽象工厂模式(Abstract Factory) 简单工厂模 ...
- windows的bat脚本
一个小小的设置固定ip和关闭防火墙的脚本: @echo //-=-=-=-=-=-=-=-=-=-=-=-=-=-=@echo // [固定设置]@echo // 设置IP,子网掩码,网关@echo ...
- ashMap源码阅读与解析
目录结构 导入语 HashMap构造方法 put()方法解析 addEntry()方法解析 get()方法解析 remove()解析 HashMap如何进行遍历 导入语 HashMap是我们最常见也是 ...
- poj2104 Kth-Number
Description You are working for Macrohard company in data structures department. After failing your ...
- crash部分命令用法
Set set [pid | taskp | [-c cpu] | -p] | [crash_variable [setting]] | -v 1.设置要显示的内容,内容一般以进程为单位. Set p ...
- 安装hexo报错（npm WARN deprecated swig@1.4.2: This package is no longer maintained），已解决
问题:在使用npm安装hexo时报错 $ npm install -g hexo npm WARN deprecated swig@1.4.2: This package is no longer m ...
- 基于Struts2的SpringMVC入门
1.SpringMVC概述 (1)SpringMVC为表现层提供基础的基于MVC设计理念的优秀Web框架, (2)SpringMVC通过一套mvc的注解,让POJO成为处理请求的控制器,而无需任何接口 ...
- 跨过Nginx上基于uWSGI部署Django项目的坑
先说说他们的关系,Nginx和uWSGI都是Web服务器,Nginx负责静态内容,uWSGI负责Python这样的动态内容,二者配合共同提供Web服务以实现提高效率和负载均衡等目的.uWSGI实现了多 ...