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>
预览一下，怎么样？是你需要的么^.^
估计是你没有导入外部样式表，<link href="../../css/main.css" rel="stylesheet" type="text/css" />类似这种，注意路径，如果不是这个问题，追问吧。
在开发过程中遇到一个需求，要实现渐变色的背景之间的过渡切换，而css3的transition属性对于background-image不生效
想了很久之后，想到一个办法，利用两个div来设置不同的渐变的背景色，再通过改变div的透明度，实现渐变色之间的过渡，效果还不错
（图片被压缩了效果看起来没这么好，可以点击查看原图）
