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. CentOS 升级PHP

    wget http://download.fedoraproject.org/pub/epel/5/x86_64/epel-release-5-4.noarch.rpm wget http://rpm ...

  2. 在Repeater中嵌套使用Repeater

    在一般的网站中浏览类别的用户控件通常都位于大多数 ASP.NET 页的左边,它使用户能够按类别快速的查找产品.最近遇到一个客户,因为在他网站上展示的产品并不多,所以要求在原有类别浏览的基础上将产品也加 ...

  3. 导入maven工程遇见的问题【问题】

    原工程是一个基于websocket的maven工程(源工程:http://www.cnblogs.com/xdp-gacl/p/5193279.html),把工程导入eclipse后报错.

  4. HTML随学随机

    1.2D坐标系由X轴个y轴构成.其中,笛卡尔坐标系是最常见的2D坐标系. 2.HTML5 canvas2D坐标系: (1)canvas坐标原点:左上角. (2)canvas的x与y轴方向: (I)x轴 ...

  5. SIP协议栈基础笔记

    //------------------SIP基础------------------------// SIP是基于UDP的协议 UA(user Agent)用户代理 UAC(client)发起SIP ...

  6. 用CSS3实现文字描边

    CSS3作为新兴的前端技术可以实现很多复杂变化的效果,比如文字描边. 这里主要用到text-shadow属性,顾名思义就是为文字加上阴影效果.例: text-shadow:10px 5px 2px # ...

  7. Knights of the Round Table-POJ2942（双连通分量+交叉染色）

    Knights of the Round Table Description Being a knight is a very attractive career: searching for the ...

  8. 再谈Bellman-Ford

    这几天学校女生节,挺累的,感觉还是挺好玩的,前几天看了一下最短路,Bellman-fort算法果然比较厉害,今天又参考了刘汝佳的两本书,有了一点新的认识. 废话不说,先上代码: #include &l ...

  9. 流镜像（华为S9306和S5700）

    流镜像是指将设备.端口或者VLAN内收.发的指定类型报文复制到观察端口上,监控设备只对指定类型报文进行监测. 流镜像有基于ACL和基于MQC(即复杂流分类)两种配置方式.前者配置简便,但是没有后者支持 ...

  10. 【Spring】初始化Spring IoC容器（非Web应用），并获取Bean

    参考文章 Introduction to the Spring IoC container and beans BeanFactory 和ApplicationContext(Bean工厂和应用上下文 ...