CSS 如何添加多个css渐变作为多个背景?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8253452/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 02:13:15  来源:igfitidea点击:

How to add multiple css gradient as a multiple background?

css

提问by Jitendra Vyas

I want to make a button like this without using image by gradients as multiple background. is it possible?

我想制作一个这样的按钮,而不使用渐变图像作为多个背景。是否可以?

enter image description here

在此处输入图片说明

using single element

使用单个元素

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

Try at jsfiddle herehttp://jsfiddle.net/Awf6s/2/

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

回答by scessor

You can define multiple gradients comma-separated. 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;
}

Also see your updated jsfiddle.

另请参阅您更新的jsfiddle