css3之linear-gradient线性渐变实例_H5之家 - 中国HTML5教程资源分享第一站

例子：

XML/HTML Code复制内容到剪贴板

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>线性渐变</title>
</head>
<style type="text/css">
body{ font-family:"微软雅黑"; font-size:25px; color:#FFFFFF; padding:50px;}
#gradient {
width:500px; margin:0 auto; height:80px;color:#FFFFFF; line-height:80px; margin:0 auto; text-align:center;
background-image: -moz-linear-gradient(top, #3a3a3a, #0d0d0d); /* FF*/
background-image: -webkit-linear-gradient(top, #3a3a3a, #0d0d0d); /* Safari, Chrome*/
background-image: -o-linear-gradient(top, #3a3a3a, #0d0d0d); /* Opera */
background-image: -ms-linear-gradient(top, #3a3a3a, #0d0d0d); /* IE9*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3a3a3a', endColorstr='#0d0d0d'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#3a3a3a', endColorstr='#0d0d0d')"; /* IE8+ */
background-image: linear-gradient(top, #3a3a3a, #0d0d0d);
border:#000 1px solid;
/*可兼容：IE6 7 8 9，Safari+,Opera+,FF+,Chrome+*/
}
</style>
<body>
<div id="gradient">线性渐变</div>
</body>
</html>

CSS Code复制内容到剪贴板

由此看来他的书写格式是这样的：background-image:linear-gradient(方向，开始颜色值,终止颜色值)

方向默认是top，可以省略，直接写成：background-image:linear-gradient(开始颜色值,终止颜色值)这样就简化了一个参数。下一步要简化的就是IE6 7 8的配置。

如果你的网站面向同行业的，可以省略相关ie6 7 8的代码。这样代码就变成了：

CSS Code复制内容到剪贴板

#gradient {
width:500px; margin:0 auto; height:80px;color:#FFFFFF; line-height:80px; margin:0 auto; text-align:center;
background-image: -moz-linear-gradient(#3a3a3a, #0d0d0d); /* FF*/
background-image: -webkit-linear-gradient(#3a3a3a, #0d0d0d); /* Safari, Chrome*/
background-image: -o-linear-gradient(#3a3a3a, #0d0d0d); /* Opera */
background-image: -ms-linear-gradient(#3a3a3a, #0d0d0d); /* IE9*/
background-image: linear-gradient(top, #3a3a3a, #0d0d0d);
border:#000 1px solid;
}

这个属性应该统一调用，至于如何做到继承性，请关注本站