Bootstrap边框类通过预设CSS快速控制显隐、方向、粗细和颜色：用border加四边灰框，border-0彻底移除，border-start/end替代left/right适配RTL，中性色类如border-secondary用于纯视觉需求，border-2~5需搭配颜色类生效，表单焦点蓝光需同时清除outline、box-shadow和border-color。
怎么用 class 快速加/删边框
bootstrap 的 border 工具类本质就是预设好的 css 边框规则，不用写一行自定义样式就能控制显隐、方向、粗细和颜色。关键不是“有没有”，而是“选哪个才不翻车”。
-
border：加四边 1px 灰色边框（默认色是#dee2e6，不是纯黑或透明） -
border-0：彻底移除四边，比手写border: none更可靠（尤其在表单控件里） - 只加某一边？用
border-top/border-bottom/border-start/border-end——注意：Bootstrap 5 起弃用left/right，改用start/end适配 RTL 布局 - 想只去掉右边框？别用
border-right: none，直接上border-end-0
为什么 border-start 不是 border-left
因为 Bootstrap 5 默认支持从右到左（RTL）语言，start 指内容起始侧（LTR 下是左，RTL 下是右），end 指结束侧。硬写 border-left 在阿拉伯语页面里会错位——这不是“多此一举”，是上线后被 QA 打回来的真实坑。
- 开发时若确定只做中文站，
border-left类仍可工作（Bootstrap 5 为兼容保留了部分旧名，但文档已标为 deprecated） - 但 CI 构建或未来国际化时，
border-start是唯一稳定选择 - 同理，
float-start替代float-left，text-start替代text-left
边框颜色和宽度怎么配才不突兀
直接套 border-success 很快，但容易忽略它绑定的是语义色（绿色代表成功状态），不是装饰色。用错场景会让 UI 产生误导，比如用在普通卡片边框上，用户会下意识觉得“这个卡片是操作成功的反馈”。
- 纯视觉需求？优先用中性色类：
border-secondary（浅灰）、border-light（更浅）、border-dark（深灰） - 需要加粗边框？
border-2到border-5对应 2–5px，但注意：这些宽度类和颜色类**必须组合使用**，单独border-3不生效（它没定义颜色） - 常见错误：
class="border-3 border-primary"✅；class="border-3"❌（无颜色 = 透明边框，看不见）
input 输入框的“蓝光边框”为什么删不干净
这不是边框问题，是 box-shadow + outline + border-color 三重叠加效果。只删 border 类完全没用，因为焦点态由 JavaScript 触发、CSS 控制，且 Bootstrap 把这三者全绑在 .form-control:focus 上。
- 正确解法是覆盖 CSS：
.form-control:focus { outline: none; box-shadow: none; border-color: #ced4da; } - 务必确保这段 CSS 在 Bootstrap CSS 之后加载，否则无效
- 如果只针对某个搜索框，别全局改，加个自定义类更安全：
<input class="form-control no-focus-ring">，再写.no-focus-ring:focus { ... }
border-0 只清边框，不清 box-shadow 和 outline。尤其在模态框里的表单、自定义下拉组件中，那个“点一下就冒蓝光”的瞬间，八成是这里没切干净。 
