必须直接覆盖.modal-content的border-radius，因其圆角值在Bootstrap 5.3.3中硬编码为0.5rem且未绑定--bs-border-radius变量，:root覆盖无效；推荐写法为.modal-content { border-radius: 8px !important; }。
bootstrap 模态框（.modal-content）的圆角大小不能靠改 rounded 工具类临时覆盖，必须直接干预其 border-radius 声明 —— 因为它的圆角值是硬编码在 css 里、且未绑定到 --bs-border-radius 变量（截至 v5.3.3）。
为什么改了 --bs-border-radius 对模态框没用
Bootstrap 5.3+ 虽已将 .card、.btn、.alert 等组件的圆角迁移到 CSS 变量 --bs-border-radius，但 .modal-content 仍使用固定值：border-radius: 0.5rem（v5.3.3 源码中明确写死）。即使你在 :root 里覆盖了该变量，.modal-content 也不会读取它。
- 验证方式：打开浏览器开发者工具，选中
.modal-content元素，在「Computed」面板里看border-radius的来源 —— 它不会显示var(--bs-border-radius) - 这个设计不是疏漏，而是为了保持模态框在不同主题/尺寸下的视觉稳定性
- 所以不要浪费时间尝试
:root { --bs-border-radius: 8px; }来影响模态框
直接覆盖 .modal-content 的 border-radius
这是最有效、兼容所有版本（v4/v5）的做法。关键点是选择器权重和加载时机：
- 必须确保你的自定义 CSS 在 Bootstrap 主样式之后加载
- 推荐写法：
.modal-content { border-radius: 8px !important; }——!important是必要的，因为 Bootstrap 的原始规则带高 specificity（如.modal .modal-content） - 如果只想改大号/小号模态框，可加限定：
.modal-lg .modal-content { border-radius: 12px !important; } - 注意：不要只写
.modal—— 它只是容器，真正渲染边框的是.modal-content
用 Sass 重定义（仅限自己编译项目）
如果你用 Webpack/Vite + Sass 编译 Bootstrap，可以在引入前覆盖变量 —— 但注意：.modal-content 不受 $border-radius 控制，它由独立变量 $modal-content-border-radius 决定（v5.3+ 支持）：
- 在自定义入口 Sass 文件顶部写：
$modal-content-border-radius: 8px;<br>@import "bootstrap/scss/functions";<br>@import "bootstrap/scss/variables";<br>@import "bootstrap/scss/mixins";<br>@import "bootstrap/scss/modal";
- 必须确保
@import "bootstrap/scss/modal"在变量覆盖之后，否则无效 - v4 中该变量叫
$modal-content-border-radius，但默认未暴露；v5.2+ 才正式支持并文档化 - 不建议只改
$border-radius或$border-radius-lg—— 它们对模态框无影响
容易被忽略的细节：阴影与溢出
改完圆角后，常出现两个视觉断层：
-
阴影裁剪异常：Bootstrap 默认给
.modal加了box-shadow，但.modal-content的圆角变大后，阴影可能被父容器.modal的overflow: hidden截断。解决方法是同步调整：.modal { overflow: visible; }（慎用，可能影响 backdrop）或微调box-shadow的 spread 值 -
顶部/底部内容溢出：若模态框内有
.modal-header或.modal-footer，它们默认没有圆角，会“顶破”.modal-content的圆角边界。安全做法是给它们也设相同圆角：.modal-header, .modal-footer { border-radius: inherit; } - 移动端 Safari 下，过大的圆角（如 >16px）配合
transform: translateY()动画时，可能触发渲染抖动 —— 建议圆角值控制在12px以内
