我正在使用Bootstrap 4，我想知道我的应用程序是否可以在$theme-colors地图中使用渐变。
使用示例
$theme-colors: (
"brand-gradient": background: -moz-linear-gradient(-45deg, #fff 0%, #000 100%);
);
所以，如果我想要一个渐变按钮我可以做
<button class="btn btn-brand-gradient">Test</button>
然后还要添加渐变，也可以像往常一样使用旧版浏览器的回退。
只是一个好奇心问题。
答案 0 :(得分：2)
不幸的是，你做不到。至少不是这样的。
来自btn的{{1}}课程uses the values，如此：
$theme-colors如果您将课程添加到@each $color, $value in $theme-colors {
.btn-#{$color} {
@include button-variant($value, $value);
}
}
，通常会让您按照建议使用课程btn-brand-gradient。
如果您take a look at the mixin $theme-colors，您会看到它使用另一个名为button-variant()的mixin作为按钮背景和边框。
在this mixin中，背景设置如下：
gradient-bg() CSS background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;
中的$color参数必须是有效的color value，在这种情况下不会出现线性渐变。