如何实现线性渐变效果

　　首先大家要知道，CSS3定义了两种类型的渐变（gradients）：线性渐变（LinearGradients）和径向渐变（RadialGradients）。

　　本节先重点介绍线性渐变-LinearGradients。

　　代码示例如下：

　　<!DOCTYPE>

　　<html>

　　<metacharset="utf-8">

　　<head>

　　<title>CSS3创建线性渐变示例</title>

　　<styletype="text/css">

　　.container{

　　text-align:center;

　　padding:20px0;

　　width:960px;

　　margin:0auto;

　　}

　　.containerdiv{

　　width:200px;

　　height:150px;

　　display:inline-block;

　　margin:2px;

　　color:#ec8007;

　　vertical-align:top;

　　line-height:230px;

　　font-size:20px;

　　}

　　.linear{

　　background:linear-gradient(tobottom,#4b6c9c,#5ac4ed);

　　}

　　</style>

　　</head>

　　<body>

　　<divclass="container">

　　<divclass="linear">Linear线性渐变</div>

　　</div>

　　</body>

　　</html>

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c54607.shtml