火狐浏览器:

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线性渐变兼容的更多相关文章

  1. css3 线性渐变和径向渐变

    线性渐变:ie6以下不兼容 径向渐变:只支持firefox.Chrome和Safari <!DOCTYPE html> <html> <head> <meta ...

  2. 【CSS3】使用CSS3线性渐变实现图片闪光划过效果(转)

    原文:http://www.nowamagic.net/librarys/veda/detail/2600 资料参考: http://www.cnblogs.com/lhb25/archive/201 ...

  3. css线性渐变兼容

    css线性渐变兼容 background: linear-gradient(top, rgba(54, 77, 127, 0.8), rgba(54, 77, 127, 0.8)); backgrou ...

  4. CSS3 线性渐变(linear-gradient) 兼容IE8,IE9

    一.线性渐变在 Mozilla 下的应用     语法: -moz-linear-gradient( [<point> || <angle>,]? <stop>, ...

  5. CSS3 线性渐变linear-gradient

    CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变).为了更好的应用 CSS3 Gradient,需要先了解一下目前的几种现代浏 ...

  6. 使用CSS3线性渐变实现图片闪光划过效果

    <p class="overimg"> <a><img src="http://www.nowamagic.net/librarys/ima ...

  7. CSS3线性渐变linear-gradient

    转自 http://www.w3cplus.com/content/css3-gradient CSS3的线性渐变 一.线性渐变在Mozilla下的应用 -moz-linear-gradient( [ ...

  8. CSS3 线性渐变(linear-gradient)

    CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 G ...

  9. CSS3线性渐变和径向渐变

    background:linear-gradient(to top left, blue,orange);//从右下角往左上角渐变 background:radial-gradient(to top ...

随机推荐

  1. 解析iscroll-小demo

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  2. Lua学习五----------Lua循环

    © 版权声明:本文为博主原创文章,转载请注明出处 1.循环类型 1.1 while循环 - 语法:while(condition) do ...<执行语句> end - 解析:判断cond ...

  3. java自定义before和after

    package com.ada.wuliu.worker.web.cooperation.worker; public class TestOne { abstract class Father{ p ...

  4. Spring MVC学习纲要

    感慨一下 之前用过Spring MVC, MyBatis,但是很久不用之后发现很多知识点都荒废了,毕竟工作就是重复,重复再重复.没有啥新东西.所以还是找个时间把忘了的东西捡起来.万一搞了个大bug,然 ...

  5. cacti 主机/网络设备流量监控 图解

    1.在配置中找到设备 console —>  Device 2.初次添加 cacti 监控主机的时候是没有任何设备的,所以要选择add 添加你要监控的主机 \

  6. Unity3D研究院之拓展自定义编辑器窗口

    Unity支持自行创建窗口,也支持自定义窗口布局.在Project视图中创建一个Editor文件夹,在文件夹中在创建一条脚本. 自定义窗口需要让脚本继承EditorWindow在设置MenuItem, ...

  7. 关于Gradle和Gradle插件的问题

    一.   Gradle更新插件问题 当更新Andorid studio 的时候,你可能会接收到一条让你更新Gradle插件到最新版本的建议.在项目编译需要的基础上,你可以选择接受或者手动选择一个具体的 ...

  8. [URAL-1517][求两个字符串的最长公共子串]

    Freedom of Choice URAL - 1517 Background Before Albanian people could bear with the freedom of speec ...

  9. EasyDSS RTMP流媒体解决方案之直播录像自动清理方案

    本文转自Marvin的博客: http://blog.csdn.net/marvin1311/article/details/78660592 EasyDSS_Solution直播录像清理 直播录像, ...

  10. JS之字符串与JSON转换

    JS之字符串转换JSON 1.eval   古老的方式 function strToJson(str){ var json = eval('(' + str + ')'); return json; ...