html - 创建一个下半部分一种颜色和上半部分另一种颜色的div

Question

我有一个我打算做成一个按钮。上半部分应该是#ffd41a，下半部分应该是#fac915。这是目前按钮的链接。 http://jsfiddle.net/WnwNW/

我面临的问题是我应该如何处理两种背景颜色。有没有办法在不需要添加 div 或 span 的情况下完成我想做的事情？我可以在同一个 CSS 类中有两个背景属性吗？

Answer 1

CSS3 提供了一种方法来做到这一点

background-image: linear-gradient(to bottom, #FFD51A 50%, #FAC815 50%);
background-image: -o-linear-gradient(bottom, #FFD51A 50%, #FAC815 50%);
background-image: -moz-linear-gradient(bottom, #FFD51A 50%, #FAC815 50%);
background-image: -webkit-linear-gradient(bottom, #FFD51A 50%, #FAC815 50%);
background-image: -ms-linear-gradient(bottom, #FFD51A 50%, #FAC815 50%);

http://jsfiddle.net/WnwNW/1/