如何将多个css渐变添加为多个背景？

Question

我想制作一个这样的按钮而不使用渐变图像作为多个背景。有可能吗？

使用单个元素

<span class="customStyleSelectBox">Dummy Text</span>

在这里尝试jsfiddle http://jsfiddle.net/Awf6s/2/

Answer 1

您可以定义多个以逗号分隔的渐变。 E.g：

.customStyleSelectBox {
    ...
    background: linear-gradient(#fff, #999) no-repeat border-box, linear-gradient(#eee, #777) no-repeat border-box;
    background-size: 98px 50px, 18px 50px;
    background-position: 0 0, 98px 0;
    background-origin: padding-box, padding-box;
}

另请参阅更新的jsfiddle。