border-2等工具类无反应是因为仅设宽度未设颜色，需配合颜色类如border-primary；还可能被高优先级样式覆盖或受元素默认样式（如img的inline特性）影响。
border-2 这类工具类为什么加了没反应
因为 border-2 本身不定义颜色，只声明宽度；Bootstrap 的边框工具类必须「颜色 + 宽度」组合才生效。单独写 border-2，浏览器看到的是 border-width: 2px，但 border-color 仍是 currentcolor（通常为透明或继承色），所以看起来像没边框。
常见错误是：<div class="border-2">内容</div> —— 这不会显示任何可见边框。
- 正确写法必须配颜色类，比如
border-2 border-primary、border-3 border-dark - 颜色类（如
border-success）在 Bootstrap 5 中固定使用1px宽度，所以想用border-3就不能只靠border-success - 如果项目用了 CSS 变量主题（如
data-bs-theme="dark"），记得检查对应颜色变量是否被重载，否则border-primary可能渲染成灰色而非蓝色
想加粗边框但 .border-3 不起作用？检查是否被其他样式覆盖
很多情况下 border-3 看似无效，其实是被更早定义、权重更高的规则盖掉了——尤其是组件自身带边框的类，比如 .alert、.badge、.list-group-item。它们内部已显式写了 border: 1px solid ...，而工具类 border-3 的 CSS 优先级不够。
-
.alert的边框由独立规则控制，border-3默认不作用于它；需手动加!important或写高权重规则：.alert.border-3 { border-width: 3px !important; } -
.badge默认设了border: 0，直接加border-2会被忽略；必须先重置border: 0，再叠加宽度和颜色 - 表格
.table-bordered的边框来自多个选择器（th、td、thead th），只改td的border-width会导致表头/表身边框粗细不一致
修改边框颜色时，focus / invalid 状态经常被忽略
给 .form-control 换边框色，只改默认态远远不够。:focus、.is-invalid、.is-valid 都有各自独立的 border-color 声明，且优先级高于普通类。不处理这些，用户一点击输入框，边框立刻变回默认蓝/红。
- 必须同时覆盖：
.my-input、.my-input:focus、.my-input.is-invalid、.my-input.is-valid - 聚焦态还依赖
box-shadow，若只想保留边框色变化，记得加box-shadow: none !important - 深色模式下，
.form-control:focus的默认阴影色（rgba(13,110,253,0.25)）可能对比度不足；建议用--bs-primary-rgb变量动态生成适配色
响应式边框或虚线边框不能只靠工具类
Bootstrap 5.3+ 才支持 border-dashed、border-dotted，旧版本完全不提供；也没有 rounded-md-down 这类响应式圆角边框工具类。所有“条件性”边框都得自己补 CSS。
- 虚线边框兼容写法：
style="border-style: dashed; border-width: 2px;"或自定义类.border-dashed-sm { border-style: dashed; } - 响应式粗细：用媒体查询控制
border-width，例如小屏1px、大屏2px，别试图用断点前缀拼工具类（如border-md-2不存在） - 图片加边框后下方留白？这不是边框问题，而是
<img>默认为inline元素，受line-height影响；加d-block或align-text-bottom才治本
.badge 或紧凑型 .input-group 里，可能引发文字裁切、圆角错位或水平溢出。改之前，务必在真实容器中测试渲染效果，而不是只看单个元素。
