CSS3兼容各浏览器的线型渐变方法：

<!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>

<meta charset="utf-8">

<title>线性渐变（linear-gradient）</title>

<style type="text/css">

.gradient{

background: #000000;

background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));

background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%);

background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);

background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%);

background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );

}

:root .gradient{filter:none;}

</style>

</head>

<body>

<div class="gradient">

垂直渐变

</div> 

</body>

</html>

如下图所示：

兼容IE哟~~

关于CSS3线型渐变这些事儿的更多相关文章

  1. CSS3 线型渐变

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. CSS3 Gradient 渐变

    转载自:http://www.w3cplus.com/content/css3-gradient CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE, ...

  3. CSS3技巧：利用css3径向渐变做一张优惠券（转）

    在很多购物网站上都能看到优惠券,代金券,什么什么的券,但基本都是图片直接放上去,那么你有没有想过css来做一个呢,反正我是这样想过.那么你怎么做呢,切图做背景平铺边缘,嗯,有这样想过,如今css3技术 ...

  4. CSS3之渐变Gradient

    渐变是CSS3中比较好玩的属性,学会了渐变,那么可以做出非常炫的东东哟.CSS3 中渐变——Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). ...

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

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

  6. CSS3背景渐变。。。

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

  7. 超多的CSS3圆角渐变网页按钮

    <!DOCTYPE html><head><title>超多的CSS3圆角渐变按钮</title><style type="text/c ...

  8. css3背景渐变以及图片混合渲染模式（一）

    一.CSS3 渐变(Gradients):CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(g ...

  9. CSS3 文字渐变动画

    背景剪裁 语法:background-clip: border-box || padding-box || context-box || no-clip || text 本次用到的就是: -webki ...

随机推荐

  1. NET基础（1）：类型基础

    所有类型都从System.Object 派生,‘运行时’要求每个类型都从System.Object类派生,也就是说,以下两个类型定义完全一致: //隐式派生字Object class Employee ...

  2. JS创建对象总结

    javascript创建对象的方法总结 Javascript创建对象 最简单的方法:创建object实例. var person=new Object(); person.name="Joe ...

  3. asp获取文件名和扩展名的函数代码

    <% '获取文件名(不含扩展名) Function getFilename(text)text = Left(text,inStrRev(text,".")-1)getFil ...

  4. jquery模拟操作——trigger()函数

    在页面中很多效果需要触发才能实现,比如click后的弹窗.但有时我们无法点击或是跳过用户触发,就像网页中那些可恶的广告弹窗 trigger函数可以实现模拟操作.譬如常用的点击动作,我们可以这样, $( ...

  5. SqlCommandBuilder的讨论

    之前也看过别人的解释,总感觉解释的不太理想,当然我自己的解释我尽量解释理想点,SqlCommandBuilder 是提供给外界对数据库的反操作的,如果只是对数据库的一个提取的话,那么用下面的代码足以 ...

  6. RegExp类型，单体内置对象

    1.RegExp类型:  1)什么是正则表达式:RegExp    --是一种规则,模式    --强大的字符串匹配工具    --创建:    --使用RegExp构造函数创建:var re=new ...

  7. mysql 配置文件 value

    在xml配置文件中配置数据库utl时,要使用&的转义字符也就是& 例如:<property name="url" value="jdbc:mysql ...

  8. js遍历数组的错误方法

    for (var index in myArray) { // don't actually do this console.log(myArray[index]); } 缺点: 数组的索引值inde ...

  9. jquery幻灯片

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  10. 思科Cisco 2960系列交换机配置命令

    配置密码: 2960>en :第一次密码为空 2960h#conf t :进入全局配置模式 2960(config)#hostname swa :设置交换机名 2960(config)#enab ...