现行渐变
首先看下示例
（1）垂直渐变


（2）垂直渐变


IE系列 
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0'); 
参数：startColorStr起始颜色 endColorStr结束颜色 gradientType为0时代表垂直，为1时代表水平

Firefox 
background: -moz-linear-gradient(top, #FF0000, #F9F900); 
参数：top、bottom垂直，left、right水平 例如：top时从顶部由#FF0000到#F9F900渐变，bottom时从底部由#FF0000到#F9F900渐变

Opera 
background: -o-linear-gradient(top,#FF0000, #F9F900); 
参数：top、bottom垂直，left、right水平 例如：top时从顶部由#FF0000到#F9F900渐变，bottom时从底部由#FF0000到#F9F900渐变

webkit，如Chrome、Safari等 
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900)); 
参数：linear线性， x1 x2, x3 x4 x1与x3相同时垂直，x2与x4相同时水平 from起始颜色 to结束颜色

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>线性渐变（linear-gradient）---http://www.jb51.net</title>

<style type="text/css">

.test1

{

width: 200px;

height: 80px;

text-align: center;

line-height: 80px;

margin-bottom: 10px;

color: White;

font-size: 20px;

filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0');

background: -moz-linear-gradient(top, #FF0000, #F9F900);

background: -o-linear-gradient(top,#FF0000, #F9F900);

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900));

}

.test2

{

width: 200px;

height: 80px;

text-align: center;

line-height: 80px;

margin-bottom: 10px;

color: White;

font-size: 20px;

filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='1');

background: -moz-linear-gradient(left, #FF0000, #F9F900);

background: -o-linear-gradient(left,#FF0000, #F9F900);

background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#FF0000), to(#F9F900));

}

</style>

</head>

<body>

<div class="test1">

垂直渐变

</div>

<div class="test2">

水平渐变

</div>

</body>

</html>

兼容IE与firefox、chrome的css 线性渐变（linear-gradient）的更多相关文章

  1. css线性渐变兼容

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

  2. CSS线性渐变

    /*CSS线性渐变*/ FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff, ...

  3. 深入理解CSS线性渐变linear-gradient

    × 目录 [1]定义 [2]渐变线 [3]色标 [4]重复渐变 [5]多背景 [6]应用场景 [7]IE兼容 前面的话 在CSS3出现之前,渐变效果只能通过图形软件设计图片来实现,可拓展性差,还影响性 ...

  4. css线性渐变--linear-gradient

    使用css直接写渐变,对于现在而言,应该属于比价简单的一件事了,在一定程度上,扁平化的设计趋势的出现,减少了使用渐变色的场景,但是并不影响我们逐渐的熟悉线性渐变Linear-gradient的写法. ...

  5. 兼容IE与firefox的css 线性渐变（linear-gradient）

    IE系列 filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900 ...

  6. 再说CSS3渐变——线性渐变

    渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...

  7. CSS3渐变——线性渐变

    渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...

  8. CSS3之线性渐变（linear gradients）

    线性渐变(linear gradients)沿着一根轴线改变颜色,从起点到终点颜色进行顺序渐变. 语法: background:linear-gradient(direction,color-stop ...

  9. CSS3渐变(Gradients)-线性渐变

    CSS3渐变(Gradients)可以让你在两个或多个指定颜色之间显示平稳的过度,包括透明度. 以前,你必须使用图像来实现这些效果.但是,通过Css3渐变(Gradients),你可以减少下载的事件和 ...

随机推荐

  1. hive 三种启动方式及用途，关注通过jdbc连接的启动

    http://blog.csdn.net/a221133/article/details/6734746

  2. 什么是PWM、PFM及VFM

    做电源设计的大都知道PWM和PFM这两个概念.而VFM模式是在大功率輸出時為PWM模式在輕負載輸出時變為PFM模式的一種混合開關模式.目前开关电源的控制技术主要就是这三种:1.脉冲宽度调制器(PWM) ...

  3. Keil C51对同一端口的连续读取方法

    C语言是当前举世公认的高效简洁而又非常贴近硬件的编程语言之一.将C语言向单片机MCS-51上的移植始于2O世纪8O年代的中后期,经过近1O年的发展,C语言克服了产生代码过长.运行速度较慢的缺点,并且由 ...

  4. WIN7下关闭驱动数字签名检查的方法

    内容是转的,最后一步貌似没什么用处,水印是去不掉的,不过也无所谓,关键是驱动能用了,要不完全瞎了 实测win7 32位旗舰版可用   ================================= ...

  5. 设计模式（八）：Bridge桥接模式 -- 结构型模式

    1. 概述 在软件系统中,某些类型由于自身的逻辑,它具有两个或多个维度的变化,那么如何应对这种“多维度的变化”?如何利用面向对象的技术来使得该类型能够轻松的沿着多个方向进行变化,而又不引入额外的复杂度 ...

  6. 2014-07-28　使用Axure RP进行手机端BBS的原型设计

    今天是在吾索实习的第14天.因本公司的微信公众号需要有一个对外的技术交流平台,所以我们小组打算设计一个手机端的BBS以满足其要求.首先,我们需要做的是进行数据库设计与原型设计,然后提交给经理验收,看看 ...

  7. 高性能Web服务器Nginx及相关新技术的应用实践-张宴

    http://files.cnblogs.com/files/niaowo/%E9%AB%98%E6%80%A7%E8%83%BDWeb%E6%9C%8D%E5%8A%A1%E5%99%A8Nginx ...

  8. BIND9源码学习笔记1---gdb调试篇

    学习bind9源码之前,首先要知道如何用gdb来调试bind.BIND9的源码我是先看代码弄懂它的架构,像什么event-drive,epoll等, 再去看它的业务流程.看业务流程的时候要追踪它的数据 ...

  9. MySQL查看数据库、表的占用空间大小

    SELECT TABLE_NAME,DATA_LENGTH+INDEX_LENGTH,TABLE_ROWS FROM information_schema.tables WHERE TABLE_SCH ...

  10. 使用GULP打包、压缩与打版本号

    这篇文章讲我整理的一种打包项目的方式,以下是我的依赖清单 "devDependencies": { "gulp": "^3.9.1", &q ...