应用新背景时，.modal-header会丢失左上半径和右半径

Question

我正在使用bootbox.js向我的用户显示一些确认和错误消息。为此我向bootbox提供className属性但是我注意到{{1的左上角和右半径当我应用一个改变它背景的类时，我会消失。这是一个jsfiddle

我知道我可以通过向.modal-header添加border-radius:5px 5px 0px 0px来解决此问题，但我想了解为什么会发生这种情况。

如果您在此处遇到链接问题，则是重现问题的最低代码：

HTML

.errorAlert .modal-header

CSS：

<div class='btn btn-info' id = "simpleModal">
Show just a simple modal
</div>
<div class='btn btn-info' id="customClass">
Show a modal with a custom class
</div>

JavaScript的：

.errorAlert .modal-header{
  background:red;
}

Answer 1

这是因为Bootstrap中的边界半径应用于.modal-content，默认情况下.modal-header没有背景。当您将背景应用于模态标题边框时，半径消失，因为您通过没有边框半径的模态标题的红色背景覆盖它们。