想了很久之后，想到一个办法，利用两个div来设置不同的渐变的背景色，再通过改变div的透明度，实现渐变色之间的过渡，效果还不错
（图片被压缩了效果看起来没这么好，可以点击查看原图）
css3目前还不完善，transition目前不支持渐变的背景属性（它被看作是图片了，图片是不能transition的，这个知道吧），so U can't transition gradients for now.
但是呢，你可以做一个掩眼法，前端嘛，css给了你无限发挥的空间。
css：
<style>body{
margin: 0
padding: 0
}
.gavin_design div{
width: 200px
height: 200px
margin: 20px auto
}
.no{
background: #ccc
-webkit-transition: all 2s linear
}
.no:hover{
background: #f60
}
.line{
position: relative
background: -webkit-linear-gradient(top,#f60,#47CC38)
}
.line_gavinfix{
position: absolute
top: 0
left: 0
width: 100%
height: 100%
opacity: 0
background: -webkit-linear-gradient(top,#47CC38,#f60)
-webkit-transition: opacity 2s linear
}
.line:hover .line_gavinfix{
opacity: 1
}
</style>
html：
<div class="gavin_design"><div class="no"></div>
<div class="line"><span class="line_gavinfix"></span></div>
</div>
预览一下，怎么样？是你需要的么^.^
首先，blue和red之间要加个逗号，即background:-moz-linear-gradient(top,blue,red)
其次，由于用了moz前缀，所以只有运行于火狐浏览器才有效。
如果想运行于webkit内核的浏览器（比如Chrome、Safari），则改为
background:-webkit-linear-gradient(top,blue,red)
至于IE（指低版本的），由于不支持css3，就只能用它本身的滤镜了。
