css3 鼠标经过渐变 |css浮动为什么不起作用

代码示例：
.button {
background: linear-gradient(to bottom, #ff0000, #00ff00);
color: #fff;
padding: 10px 20px;
border-radius: 5px;
}
.button:hover {
background: linear-gradient(to bottom, #00ff00, #ff0000);
cursor: pointer;
}

上面这段代码展示了如何通过CSS3的渐变效果实现鼠标经过的渐变效果。在按钮的样式中，大家设置了一个线性渐变的背景颜色，当鼠标经过时，将渐变颜色翻转，以达到更好的视觉效果。

需要注意的是，设置渐变效果时，需要同时设置较为兼容的前缀，以支持不同浏览器的渐变效果。比如：

.code {
/* 谷歌、Safari 5.1+ */
background: -webkit-linear-gradient(top, #ff0000, #00ff00);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #ff0000, #00ff00);
/* IE10+ */
background: -ms-linear-gradient(top, #ff0000, #00ff00);
/* 标准语法 */
background: linear-gradient(to bottom, #ff0000, #00ff00);
}

总之，CSS3鼠标经过渐变是一个非常实用的特性，通过使用它，大家可以为页面增添一份艺术的感觉，同时提升用户体验。