火狐浏览器:

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. imagemagick imagick

    imagemagick#图像处理软件 安装解压 ./configure make make install imagick#是php图像扩展模块 调用imagemagick处理图像 安装解压/opt/ ...

  2. 怎么学习PS快?

      PS快速入门笔记 软件界面: 菜单栏, 工具箱 工具属性栏 悬浮面板 画布 ctrl + N 新建画布   如果需要出图:分辨率:300 颜色模式:CMYK 屏幕显示: 分辨率: 72 颜色模式: ...

  3. iOS 自己定义页面的切换动画与交互动画 By Swift

    在iOS7之前,开发人员为了寻求自己定义Navigation Controller的Push/Pop动画,仅仅能受限于子类化一个UINavigationController,或是用自己定义的动画去覆盖 ...

  4. ssh登录慢的解决办法

    ubuntu的ssh登录有点慢,其实是很慢 google了一把,发现可以这样解决: (1)可能是DNS反向解析的问题 对于这样的问题,可以在/etc/ssh/sshd_config 中添加/修改: U ...

  5. java 中的final

    在编程语言中都有某种方式,告知编译器一块数据是恒定不变的.有两个需求 1. 一个永不改变的编译器常量 2. 一个在运行时被初始化的值,而这个值不会被改变 在Java中,使用final修饰变量实现这两个 ...

  6. jdbcTemplaate queryForObject的两个易混淆的方法

    JdbcTemplate中有两个可能会混淆的queryForObject方法: 1.    Object queryForObject(String sql, Object[] args, Class ...

  7. Struts2实现文件的上传与动态下载功能。

    本篇主要使用Struts2实现文件的上传与动态下载功能.出于安全考虑,所以,在硬盘上存储上传的文件的时候,统一都重新命名为随机字符串.用数据库存储真实文件名与随机文件名称之间的关联. 下面的是实体类 ...

  8. Struts2实现input数据回显

    /** 修改页面 */    public String editUI() {        //准备回显得数据        Role role = roleService.getById(id); ...

  9. linux uart驱动——uart原理(一)

    UART(Universal Asynchronous Receiver and Transmitter)通用异步收发器(异步串行通信口),是一种通用的数据通信协议,它包括了RS232.RS499.R ...

  10. iOS项目 -- 模仿花椒直播做的第二层界面完整版

    ,项目开始做了,好遗憾的是,花椒app有更新了版本,