火狐浏览器:

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. Linux的经常使用命令(2) - 关机

    关机命令 shutdown‑h now 马上进行关机 shutdown‑r now 如今又一次启动计算机 -t sec : -t后面加秒数,即"过几秒后关机" -k      : ...

  2. google 搜索结果在新标签页打开

    google->setting->search setting->Where results open->勾选

  3. jquery:选择器 过滤器

    容易理解错误的地方: 1.假如我们想要让一个表格中第八列的所有单元格,都隐藏起来.我们可能会这么写$("table tr td:eq(8)").css("display& ...

  4. html的table使用div创建

    午休时间写了一个使用div创建table的案例 1.样式 <style> .table { display: table; } .tableRow { display: table-row ...

  5. Java储存过程

    存储过程:是指保存在数据库并在数据库端执行的程序. CallableStatement 对象为所有的 DBMS 提供了一种以标准形式调用已储存过程的方法.已储存过程储存在数据库中. 对已储存过程的调用 ...

  6. 笔记本WIFI卡简介

    1.Intel AC9560(CNVI) AC9260(pcie) 3165D2W(pcie) 2.Realtek瑞昱 RTL8822be(pcie) RTL8723BU(USB) 英特尔在300系主 ...

  7. C语言 包含结构的结构

    一个结构体的成员是另一个结构体 代码: # include <stdio.h> # include <stdlib.h> struct data { int year; int ...

  8. 图片压缩CompressUtil解析

    CompressUtil 流程图: CompressUtil 类 具体解释 public class CompressUtil { /** * 终于封装的压缩方法 * @param imgPath * ...

  9. HDFS中数据节点数据块存储示例

    数据块在数据节点上是按照如下方式存储的. 首先是一个存储的根目录/Hadoop/data/dfs/dn,如下图所示: 接着进入current目录,如下图所示: 再进入后续的BP-433072574-1 ...

  10. HTML5实现两个视频循环播放!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...