本篇将介绍如何在CSS3中实现颜色渐变。
在提到颜色渐变的时候肯定要提到Transition，Transition有两个属性，一个是过度属性名称，另外一个是过度时间。
在Chrome和Safari下需要写成-webkit-transition
在Firefox下要写成-moz-transition
在Opera下要写成-o-transition
然后就建立一个简单的DIV，然后定义为block。
<body>
<div id="block">
</div>
</body>
然后在CSS中来定义block的属性
#block{
width:400px;
height:400px;
background-color:blue;
margin:0 auto;
}
#block:hover{
background-color:red;
}
此时的变色会是生硬的，如果想要平滑的变色，你需要加上transition的属性，在这里我就是用Chrome的transition属性。
-webkit-transition: background-color 1s;
整体代码：
<!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 content="zh-cn" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style>
#block{
width:400px;
height:400px;
background-color:blue;
margin:0 auto;
-webkit-transition: background-color 1s;
}
#block:hover{
background-color:red;
}
</style>
</head>
<body>
<div id="block">
</div>
</body>
</html>
