要彻底移除 Bootstrap 5 模态框直角化需三步：1. .modal-content 需自定义 border: none; border-radius: 0;；2. 清除 .modal-header 和 .modal-footer 的默认边框；3. 聚焦轮廓属可访问性范畴，须用 :focus:not(:focus-visible) 安全处理。
`.modal-content` 的边框和圆角不是靠工具类控制的
bootstrap 5 的 .modal-content 默认带 border: 1px solid rgba(0,0,0,.2) 和 border-radius: .5rem，这两个样式写死在框架 css 里，跟 border-0 或 rounded-0 这类工具类完全无关。加了 border-0 只能清掉 border，但圆角还在；加 rounded-0 则对圆角无效——因为它的声明优先级远低于 .modal-content 原生规则。
必须直接覆盖 border 和 border-radius
最干净的做法是用自定义 CSS 显式重置这两项，且需确保它在 Bootstrap 样式之后加载（或提高选择器权重）：
-
border: none或border: 0—— 推荐none，兼容性更稳 -
border-radius: 0—— 唯一有效方式，别试图用rounded-0替代 - 如果用了 scoped style、CSS-in-JS 或 Shadow DOM，可能需要加
!important或用更强选择器，比如.modal-content.no-border
示例：
.modal-content {
border: none;
border-radius: 0;
}
`.modal-header` 和 `.modal-footer` 也有隐藏边框
即使清掉了 .modal-content，视觉上仍可能看到“残留边框感”，因为：
-
.modal-header默认有border-bottom: 1px solid rgba(0,0,0,.125) -
.modal-footer默认有border-top: 1px solid rgba(0,0,0,.125) - 全屏模态框（
modal-fullscreen）下.modal-dialog虽然 margin 归零，但没自动清border-radius，也得手动补
所以真正直角化一个 Modal，往往要连着处理三层：dialog → content → header/footer。
按钮和输入框的 focus 边框是另一回事，别混在一起清
Modal 里的 .btn 或 .form-control 点击后出现的蓝色/黑色轮廓，是浏览器原生 :focus outline，和 Modal 自身边框无关。错误地全局写 *:focus { outline: none } 会破坏键盘可访问性。正确做法是：
- 用
:focus:not(:focus-visible) { outline: none }区分鼠标点击和键盘聚焦 - 同时给
.btn:focus补一个box-shadow或border-color作为替代反馈 - 别碰
.modal-content相关样式去解决这个，方向错了
真正容易被忽略的，是 header/footer 的 border 和 focus 可访问性的混淆——它们看起来像“边框线”，但来源、作用和修复逻辑完全不同。
