借助background-position实现渐变过渡
background-image虽然不支持CSS3 transition过渡，但是background-position支持啊，于是，通过控制背景位置，我们是可以实现渐变过渡效果的。
实现效果如下（鼠标hover）：
借助background-color实现渐变过渡
background-image虽然不支持CSS3 transition过渡，但是background-color支持啊，于是，通过控制背景颜色，和一个颜色呈现技巧，我们也是可以实现渐变过渡效果的。
鼠标hover前后效果对比：
借助伪元素和opacity实现渐变过渡
借助伪元素创建变换后的渐变效果，通过改变覆盖的渐变的opacity透明度变化实现渐变过渡效果。
下图为hover之后的效果：
相关代码如下：
扩展资料：mozilla 使用 CSS transitions
左到右；上到下：
.hbar {FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr='#25323A',endColorStr='#6E706D')}
.vbar {FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr='#25323A',endColorStr='#6E706D')}
有效的过渡属性包括：background, position, border, color,margin, padding, height, width, outline, visibility, opacity, zindex,line-height, letter-spacing, word-spacing, min/maxlength/height/width, text的一些属性等等
transition-duration:time[,time]*：指定对象过渡的持续时间
transition-timing-function是transition属性里最为复杂的一个，针对的是过渡效果的特效。
五种预留特效：
linear:线性过渡。等同于贝塞尔曲线(0,0,1.0,1.0)
ease:平滑过渡。等同于贝塞尔曲线(0.25,0.1,0.25,1.0)
ease-in:由慢到快。等同于贝塞尔曲线(0.42,0,1.0,1.0)
ease-out:由快到慢。等同于贝塞尔曲线(0,0,0.58,1.0)
ease-in-out:又慢到快再到慢。等同于贝塞尔曲线(0.42,0,0.58,1.0)
transition-timing-function是transition属性里最为复杂的一个，针对的是过度效果的特效。
也可以自己制定过渡特效：cubic-bezier(number,number,number,number)。特定的贝塞尔曲线类型，4个数值需在[0,1]区间内。（贝塞尔曲线，有人也翻译为贝兹曲线）
