Как добавить несколько градиентов css в качестве множественного фона?

Я хочу сделать такую кнопку, не используя изображение градиентами в качестве нескольких фона. возможно ли это?

enter image description here

использование одного элемента

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

попробуйте jsfiddle здесь http://jsfiddle.net/Awf6s/2/

6
css css3

1 ответов

вы можете определить несколько градиентов, разделенных запятыми. Например:

.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.

27