CSS 3_渐变效果的实现
本文将通过CSS 3来展示一个链接的渐变效果，当鼠标停留在链接上面背景颜色会改变。在这之前这种效果只能通过Flash或者JavaScript完成，现在只需要几行CSS代码就可轻松做到
完成后的效果
首先来创建简单的超链接，如下
<body>
<nav>
<a href="http://www.baidu.com" class="foo">打开百度</a>
<a href="http://www.baidu.com" class="foo">打开百度</a>
<a href="http://www.baidu.com" class="foo">打开百度</a>
<a href="http://www.baidu.com" class="too">打开百度</a>
</nav>
</body>
</html>
接下来，为正常链接状态下，添加颜色（颜色浅一点，浅绿色的）
a.foo{
padding: 10px 20px;
background: #adff2f;
}
随后添加变换后的绿色背景
a.foo:hover{
background: green;
}
接下来，添加渐变，由于此特性并不是所有浏览器都支持的，所以要在属性前加前缀以示区别。
a.foo{
padding: 10px 20px;
background: #adff2f;
-webkit-transition-property: background;
-webkit-transition-duration: 1.3s;
-webkit-transition-timing-function: ease;
}
PS: -webkit-transition-property: background; 对背景颜色进行渐变
-webkit-transition-duration: 1.3s; 渐变持续时间，即从一种颜色过度到另一种颜色的时间
-webkit-transition-timing-function: ease; 渐变使用的函数
其中timing-function有六个可选值，用于控制转换效果，分别是ease,linear, ease-in, ease-out, ease-in-out, and cubic-bezier
添加延时效果
-webkit-transition-delay: 0.5s;
这里要区别 -webkit-transition-duration: 1.3s;这个属性（从A色变到B色的时间）。而-webkit-transition-delay: 0.5s;是开始变换的延时时间（鼠标停留上去延时0.5秒再变换和鼠标离开后，延时0.5再返回正常状态的颜色）
可以把时间值加大之后，再看运行效果
a.foo{
padding: 10px 20px;
background: #adff2f;
-webkit-transition-property: background;
-webkit-transition-duration:5.3s;
-webkit-transition-timing-function: ease;
-webkit-transition-delay: 2.5s;
}
使用缩写形式
a.foo{
padding: 10px 20px;
background: #adff2f;
-webkit-transition;background 1.3 ease;
}
带有延时效果的缩写形式：
-webkit-transition: background 0.3s ease 1.5s;
多浏览器支持：
a.foo{
padding: 10px 20px;
background: #adff2f;
-webkit-transition: background 0.3s ease 1.5s;
-moz-transition: background 0.3s ease 1.5s;
-o-transition: background 0.3s ease 1.5s;
transition: background 0.3s ease;
}
