如何更改引导模式的边界半径？答案

【问题标题】：How to change border radius of bootstrap modal?如何更改引导模式的边界半径？
【发布时间】：2015-06-11 07:41:36
【问题描述】：

我无法更改引导模式的边框半径。

.modal{
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px; 
}

我该怎么做？

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

引导 3：

在 Bootstrap 3 中，您需要将边框半径应用于 .modal-content div 元素而不是 .modal div 元素，如下所示：

.modal-content  {
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    border-radius: 0px !important; 
}

注意如果您的自定义 css 在您的引导 css 之后加载，请删除 !important 标签。

引导程序 4 和引导程序 5：

在 Bootstrap 4 和 Bootstrap 5 中，您只需将 rounded-0 类名添加到您的 modal-content 元素（或任何其他元素）中即可将其设置为0 的边界半径如下：

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content rounded-0">
        <!-- Your Modal content here -->
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

在 Bootstrap 4 中尝试以下操作：

.modal-content {
  -webkit-border-radius: 0px !important;
  -moz-border-radius: 0px !important;
  border-radius: 0px !important;
  -webkit-border: 0px !important;
  -moz-border: 0px !important;
  border: 0px !important;
}

border-radius 移除圆角，而 border 移除模态框周围的所有边框（左、右、上、下）。

【讨论】：

【解决方案3】：

您可以只使用rounded-0 引导类。

<div class="modal-content rounded-0">
</div>

【讨论】：

【解决方案4】：

我使用以下并成功：

<div class="modal-content" style="background: transparent;">
                      <div class="modal-body" style="border-radius: 10px;">

【讨论】：

【解决方案5】：

也许您尝试设置错误元素的样式。

根据getbootstrap.com/javascript/#static-example，你应该样式：

.modal-content

【讨论】：

【解决方案6】：

我按照上面的答案做了一半。经过一番检查，我意识到我的特定实例既有 .modal-content 部分，也有 .modal-dialog 部分。所以要小心，在同一个模式弹出窗口上不要有两个边框。在我移除 .modal-dialog 边框并调整 .modal-content 后，我的模态看起来超级漂亮！

.modal-content { 
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
}

.modal-dialog {
    border: 0px !important;
}

如前面的答案所述，如果您的代码出现在引导代码之前，请使用 !important。

【讨论】：

【解决方案7】：

为了覆盖一段 CSS，您可以将以下内容添加到您的自定义 CSS 文件中，假设此文件在 Bootstrap 之后加载。

.modal{
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    border-radius: 0px !important; 
}

【讨论】：