<p>应直接用 border CSS 属性覆盖，因 Bootstrap 5 的 .modal-content 默认 border: 0 且 border- 工具类不设 border-style，导致无效；需显式声明 border-style、width、color 并加 !important。</p>
直接用 border CSS 属性覆盖，别依赖 Bootstrap 的 border- 工具类——它们对 .modal-content 无效，且容易被默认 border: 0 重置。
为什么 border 类加在 .modal-dialog 或 .modal-content 上没反应？
因为 Bootstrap 5 的 .modal-content 默认设了 border: 0 和 box-shadow，而 border- 工具类（如 border-primary）只提供 border-color 或 border-width，不带 border-style，无法突破 border: 0 的压制。
-
border类本身（如border）等价于border: 1px solid #dee2e6，但它只对普通元素生效，.modal-content的高优先级规则会把它干掉 - 你加的
border-primary只改颜色，但前提是边框已存在；border-2只改宽度，同样无效 - 最简验证：打开开发者工具，看
.modal-content的 computed 样式里border-style是否仍是none
怎么安全地给 .modal-content 加自定义边框？
写一个明确、带 !important 的自定义规则，确保 border-style、border-width、border-color 三者同时声明，不依赖工具类组合。
- 推荐写法：
.modal-content { border: 2px solid #495057 !important; } - 若只要上边框：
.modal-content { border-top: 3px dashed #0d6efd !important; border-right: 0; border-bottom: 0; border-left: 0; } - 避免用
border-radius单独覆盖——.modal-content默认有border-radius: 0.375rem，完整border声明会重置它；如需保留圆角，额外补上border-radius: 0.375rem - 不要在
.modal-dialog上设border，它只是定位容器，边框会出现在模态框外侧，视觉错位
响应式或深色模式下边框怎么适配？
Bootstrap 的 data-bs-theme="dark" 不自动影响边框颜色，必须手动覆盖；响应式断点也得靠媒体查询或 border-*-sm/md/lg 类（仅 Bootstrap 5.2+ 支持）。
立即学习“前端免费学习笔记（深入）”；
- 深色模式适配：
[data-bs-theme="dark"] .modal-content { border-color: rgba(255, 255, 255, 0.1) !important; } - 小屏下边框易虚化？把
border-width提到2px或改用box-shadow: inset 0 0 0 2px #495057替代，抗锯齿更好 - 想在移动端全屏、桌面端有边框？用
@media (min-width: 992px)包裹边框规则，或加border-lg类（需确认项目启用了响应式边框工具类） - 注意：所有带
!important的规则，必须放在 Bootstrap CSS 之后加载，否则不生效
真正容易被忽略的是 border-style 这个“开关”——没它，再鲜艳的颜色、再粗的宽度都看不见。很多人卡在加了 border-primary 却没效果，本质是忘了先打开边框样式。
