借助background-position实现渐变过渡
background-image虽然不支持CSS3 transition过渡，但是background-position支持啊，于是，通过控制背景位置，我们是可以实现渐变过渡效果的。
实现效果如下（鼠标hover）：
借助background-color实现渐变过渡
background-image虽然不支持CSS3 transition过渡，但是background-color支持啊，于是，通过控制背景颜色，和一个颜色呈现技巧，我们也是可以实现渐变过渡效果的。
鼠标hover前后效果对比：
借助伪元素和opacity实现渐变过渡
借助伪元素创建变换后的渐变效果，通过改变覆盖的渐变的opacity透明度变化实现渐变过渡效果。
下图为hover之后的效果：
相关代码如下：
扩展资料：mozilla 使用 CSS transitions
从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到蓝色：
#grad1 {
height: 200px
background: -webkit-linear-gradient(left top, red , blue)/* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, red, blue)/* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, red, blue)/* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, red , blue)/* 标准的语法（必须放在最后） */
}
参考网址：网页链接
CSS不可以同时定义两个背景，不过你可以嵌套一下，比如：在div里面嵌套一个span，然后可以分别设置背景，以达到自己想要的效果。做渐变的背景，要突破浏览器的限制，建议用图片做，先在PS 里面根据需要（纵向或横向）制作一张渐变的图片，然后，裁切成1px高或宽的条。
然后在设置背景的时候， 横向（repeat-x）或纵向平铺（repeat-y）就可以了。
如果是纵向渐变，就做竖条，横向平铺。横向渐变，就是做横条，纵向平铺就可以了。 就这么简单。
