按钮上的渐变未填充按钮的整个空间 - HTML

Question

我有一段在按钮上显示渐变的代码

<button
type="button"
style="background: linear-gradient(to bottom, red, red 50%, blue 50%);"
class="btn btn-default btn-circle btn-lg"
></button>

问题是这是结果(屏幕截图(

https://i.stack.imgur.com/dvdA0.png

我想要顶部的红色和底部的蓝色，但要延伸到最底部，您可以看到颜色在底部随机切换。我该如何防止这种情况？-谢谢

Answer 1

试一试...请注意!important。你需要覆盖 Bootstrap 的 CSS。

对于样式表：

.btn {
background: linear-gradient(to bottom, red, red 50%, blue 50%) !important;
background-repeat: no-repeat !important;
}

或对于内联：

style="background: linear-gradient(to bottom, red, red 50%, blue 50%); background-repeat: no-repeat !important;"