尽管设置了模态内容的样式，但为什么我无法更改模态的边界半径？

Question

如何更改模态框的边框半径属性？我已经检查过 link 但它没有解决我的问题：

这是我的代码：

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
              integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
              integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
                integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
                integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
                crossorigin="anonymous"></script>

    <body>
    <div class="modal fade" id="MyPicLarge" role="MyPicLarge">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">title</h4>
                </div>
                <div class="modal-body">
                    <img src="MyImageSrc">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">close</button>
                </div>
            </div>
        </div>
    </div>
    </body>

    <style>
    #MyPicLarge .modal-content {
        height: 550px;
        width: 420px;
        margin: 0 auto;
        display: block;
        text-align: center;
        border-radius: 50px!important;
    }
    </style>

如果你注意了，即使在我的css中指定了!important，它仍然不起作用。我已经为我的 .modal-content 指定了样式。所以基本上它必须工作，但边界仍然清晰，而我想要圆角。我正在使用 bootstrap 3。有人知道我的错误是什么吗？

Answer 1

要解决此问题，您实际上还需要将样式 border-radius: 50px; 或任何其他任意数字也指定给您的 #MyPicLarge .modal-header。那么你不需要 CSS !important 属性。像这样：

#MyPicLarge .modal-header {
    border-radius: 10px 10px 0 0;
}

请注意，我们不会设置左下角和右下角的值。我们将在设置样式 .modal-footer 时设置它们。像这样：

#MyPicLarge .modal-footer {
    border-radius: 0 0 10px 10px;
}

除了为您的 #MyPicLarge .modal-content 添加 border-radius 样式外，

然后你可以看到你所有的 4 个角在 Bootstrap 3 Modals 中都是圆的。

请记住，.modal-content 的 border-radius 值必须等于 .modal-header 和 .modal-footer 的 border-radius 值。例如，如果您选择 10px，则不要更改另一个号码以完美覆盖角落。

所以，完全按照我这里的代码，只为我的 .modal-content 提供 border-radius 样式是不够的，我必须将上面提到的那两个代码块提供给我的项目解决这个问题。

尽管设置了模态内容的样式，但为什么我无法更改模态的边界半径？

why am I not able to change my modal's border-radius despite of styling my modal-content?

html

css

twitter-bootstrap-3