css3线性渐变兼容
火狐浏览器:
background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
谷歌:
.l6{background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900)); } 谷歌10+

.l7{background: -webkit-gradient(linear, left top, right top, color-stop(0%,#30c6e0), color-stop(100%,#1e77db));} 谷歌1-9

不带前缀:
.l1{background: linear-gradient(to bottom, blue 2%, white 50%, orange);}

.l2{background: linear-gradient(to bottom right, blue 2%, white 50%, orange);}

.l3{background: linear-gradient(20deg, blue 2%, white 50%, orange);}

多个背景
.l5{background:url(http://pinqu.qiniudn.com/sq_daas_c5caf34a66473182975d1595c623a037) no-repeat 0 0/100% 100%;}
.l4{background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://pinqu.qiniudn.com/sq_daas_c5caf34a66473182975d1595c623a037) no-repeat 0 0/100% 100%;}

参考来源:http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html
css3线性渐变兼容的更多相关文章
- css3 线性渐变和径向渐变
线性渐变:ie6以下不兼容 径向渐变:只支持firefox.Chrome和Safari <!DOCTYPE html> <html> <head> <meta ...
- 【CSS3】使用CSS3线性渐变实现图片闪光划过效果(转)
原文:http://www.nowamagic.net/librarys/veda/detail/2600 资料参考: http://www.cnblogs.com/lhb25/archive/201 ...
- css线性渐变兼容
css线性渐变兼容 background: linear-gradient(top, rgba(54, 77, 127, 0.8), rgba(54, 77, 127, 0.8)); backgrou ...
- CSS3 线性渐变(linear-gradient) 兼容IE8,IE9
一.线性渐变在 Mozilla 下的应用 语法: -moz-linear-gradient( [<point> || <angle>,]? <stop>, ...
- CSS3 线性渐变linear-gradient
CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变).为了更好的应用 CSS3 Gradient,需要先了解一下目前的几种现代浏 ...
- 使用CSS3线性渐变实现图片闪光划过效果
<p class="overimg"> <a><img src="http://www.nowamagic.net/librarys/ima ...
- CSS3线性渐变linear-gradient
转自 http://www.w3cplus.com/content/css3-gradient CSS3的线性渐变 一.线性渐变在Mozilla下的应用 -moz-linear-gradient( [ ...
- CSS3 线性渐变(linear-gradient)
CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 G ...
- CSS3线性渐变和径向渐变
background:linear-gradient(to top left, blue,orange);//从右下角往左上角渐变 background:radial-gradient(to top ...
随机推荐
- linux 文件查找实用技巧
1.tail catalina.out -n 100000 | grep -niR com.uujimu.utils.ArticleContentReplace.replacNumToA 查找内容,并 ...
- vue2 axios 接口函数封装
封装 axios 工具,编辑 src/api/index.js 文件 首先,我们要使用 axios 工具,就必须先安装 axios 工具.执行下面的命令进行安装 npm install axios - ...
- Async Await 使用
1.简单例子 var sleep = function (time) { return new Promise(function (resolve, reject) { setTimeout(func ...
- 面试题:使用finalkeyword修饰一个变量时,是引用不能变,还是引用的对象不能变?
/* * 问题:使用finalkeyword修饰一个变量时,是引用不能变,还是引用的对象不能变 * 答: * 使用finalkeyword修饰一个变量时,是指引用变量不能变,引用变量所指向的对象中的内 ...
- Node.js学习笔记(4)——除了HTTP(服务器和客户端)部分
很多node入门的书里面都会在介绍node特性的时候说:单线程,异步式I/O,事件驱动. Node不是一门语言,它是运行在服务器端的开发平台,官方指定语言为javascript. 阻塞和线程: 线程在 ...
- linux链接外网手动设置
/etc/sysconfig/network-scripts/ifcfg-eth0 设置IP网关等参数 DEVICE=eth0HWADDR=00:0C:29:C5:43:34TYPE=Etherne ...
- [Android Studio 权威教程]最有用的快捷键
上篇中我们讲了Android Studio怎样加入插件.这篇我们讲讲AS的快捷键.这里我说明的快捷键都是最最有用的,希望刚刚加入AS的朋友尽快的熟悉一下这几个快捷键,这样能够帮助你提高coding的效 ...
- java中url正则regex匹配
String regex = "^(?:https?://)?[\\w]{1,}(?:\\.?[\\w]{1,})+[\\w-_/?&=#%:]*$"; 解释说明: ^ : ...
- 记录下关于ejabberd及XMPP的官网链接
ejabberd中文翻译 ——http://wiki.jabbercn.org/Ejabberd2:安装和操作指南 XMPP中文翻译: http://wiki.jabbercn.org/XEP-012 ...
- 【TensorFlow-windows】(六) CNN之Alex-net的测试
主要内容: 1.CNN之Alex-net的测试 2.该实现中的函数总结 平台: 1.windows 10 64位 2.Anaconda3-4.2.0-Windows-x86_64.exe (当时TF还 ...