Css 更改twitter引导模式的标题背景色

我正在尝试使用下面的css代码更改twitter引导的模式标题的背景颜色

.modal-header
 {
     padding:9px 15px;
     border-bottom:1px solid #eee;
     background-color: #0480be;
 }
 .modal-header .close{margin-top:2px}
 .modal-header h3{margin:0;line-height:30px}

---

但该代码使模态标题的角具有角度。在使用上述代码之前，角是圆形的。如何获得具有上述背景色的模式标题的圆角？？谢谢

将该类添加到css文件中，以覆盖引导类

。modal header

.modal头文件{
背景#0480be；
}

---

重要的是，尽量不要编辑引导CSS，以便能够从回购协议中进行更新，并且不会丢失所做的更改或破坏未来版本中的某些内容

角实际上位于

模式内容中

所以你可以试试这个：

.modal-content {
  background-color: #0480be;
}
.modal-body {
  background-color: #fff;
}

如果更改页眉或页脚的颜色，圆角将被绘制。
您可以使用下面的css，将其放入自定义css中以覆盖引导css

.modal-header {
    padding:9px 15px;
    border-bottom:1px solid #eee;
    background-color: #0480be;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
 }

我自己也很想知道如何更改模式标题的颜色

在我对这个问题的解决方案中，我试图遵循我对Bootstrap愿景的解释。我添加了标记类来说明模态对话框的功能

模态成功、模态信息、模态警告和模态错误说明了它们的作用，如果您在引导中更改了一些模态类，您不会因为突然出现一种无法在任何情况下使用的颜色而陷入困境。当然，如果你有自己的主题，你应该改变它们

在我的解决方案中，我实际上只是从bootstrap中的
alert success
复制了样式，并添加了边界半径以保持圆角

所以，我尝试了这些其他方法，但是有一个非常刺激的问题，那就是如果你保持模态内容边界半径，在FF和Chrome中，沿着边界显示一点白色的修剪，即使你在模态标题边界半径上使用5px。（标准模式内容边框半径为6px，因此模式标题边框顶部半径上的5px覆盖一些白色）

我的解决方案：

.modal-body
{
    background-color: #FFFFFF;
}

.modal-content
{
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    background-color: transparent;
}

.modal-footer
{
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -moz-border-radius-bottomleft: 6px;
    -moz-border-radius-bottomright: 6px;
}

.modal-header
{
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
}

！！警告

然后必须设置模式页眉、模式内容和模式页脚的背景色。这是一个不错的权衡，因为它允许您这样做：

<div class="modal-header bg-primary">

<div class="modal-body bgColorWhite">

<div class="modal-footer bg-info">



编辑

或者更好：

<div class="modal-header alert-primary">


我只需要：

.modal-header{
     background-color:#0f0;
}
.modal-content {
    overflow:hidden;
}

overflow:hidden
将颜色保留在
边界半径内
到派对有点晚，但这里有另一个解决方案

简单地将模态的类别调整为类似于
警报危险
的级别确实有效，但是它会删除模态的顶部圆角

一种解决方法是为带有
模式标题的元素
添加一类
面板标题
，例如：

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header panel-heading"> <!-- change here -->
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

所有其他答案
溢出：隐藏
、
警报危险
在引导4中对我不起作用，
但我在Bootstrap4中找到了一个简单的解决方案。
由于白色修剪来自模态内容，只需向其添加
border-0
class，白色修剪就会消失

例如：
您可以通过简单地将类添加到模式头来解决这个问题

<div class="modal-header bg-primary text-white">


如下所述：（i）下角为6px，上角为5px，因为使用6px角显示模态内容背景色，以及（ii）即使使用5px角，模态内容背景色仍显示少许。如果有更好的解决方案就好了。是的，我同意@Kekito，这不是一个理想的解决方案。我发现使用
4px
radius效果更好。这只适用于希望页眉和页脚背景具有相同颜色的情况。太棒了！你发现了什么副作用？：）@我现在记不起来了。您是否注意到此解决方案有任何改进？完美无瑕！谢谢。永远不要编辑引导CSS，你应该在一个单独的文件中用你自己的覆盖它。你也可以尝试渐变颜色，bg渐变主，bg渐变成功，bg渐变信息，等等。
jQuery('.modal-content').addClass('panel-danger')

<div class="modal-header bg-primary text-white">