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 ...
随机推荐
- Historical节点
Historical节点 Historical 节点的作用是,load 历史数据提供查询. 运行类 io.druid.cli.Main server historical 装载和保存Segments ...
- JS&Jquery中的遍历
JavaScript中的遍历: 1.for 遍历 var anArray = ['one','two']; for(var n = 0; n < anArray.length; n++) { ...
- 2017最新苹果 APPLE ID注册流程
不管你是苹果开发者还是苹果爱好者,只要你手中有苹果的终端(IPHONE .IPAD .ITouch,MAC电脑) 你想用苹果的一些服务,你就必须要申请苹果APPLE ID,才能享受到苹果提供高品质的服 ...
- 傻瓜式使用AutoFac
定义一个接口: using System; using System.Collections.Generic; using System.Linq; using System.Web; namespa ...
- while循环语句的几种方式
我们知道,在Python中经常我们要使用循环,其中最常用的是while循环,while有很多结合方式,我们知道,如果一个循环没有结束语句那么就失去了意义,所以我们一定要有结束语句,下面来看看while ...
- Linux - PCB之task_struct结构体
task_struct结构描述 1. 进程状态(State) 进程执行时,它会根据具体情况改变状态 .进程状态是调度和对换的依据.Linux中的进程主要有如下状态,如表4.1所示. 内核表示 含义 ...
- Android系统--输入系统（九）Reader线程_核心类及配置文件
Android系统--输入系统(九)Reader线程_核心类及配置文件 1. Reader线程核心类--EventHub 1.1 Reader线程核心结构体 实例化对象:mEventHub--表示多个 ...
- python——杂货铺
三目运算: >>> 1 if 5>3 else 0 1 >>> 1 if 5<3 else 0 0 深浅拷贝: 一.数字和字符串 对于 数字 和 字符串 ...
- codeforces 591B Rebranding (模拟)
Rebranding Problem Description The name of one small but proud corporation consists of n lowercase E ...
- WPF+MVVM学习总结 DataGrid简单案例
一.WPF概要 WPF(Windows Presentation Foundation)是微软推出的基于Windows 的用户界面框架,属于.NET Framework 3.0的一部分.它提供了统一的 ...