border-3 单独对 Bootstrap 按钮无效，因 .btn 默认 border: 0，而 border-3 仅设宽度，不提供 style 和 color；必须组合 border、border-{color} 与 border-3 才生效。
单独加 border-3 对 bootstrap 按钮无效——它不定义颜色和样式，只管宽度，而按钮默认 border: 0，没边框就加粗不了。
为什么 border-3 单独用在按钮上没反应
Bootstrap 的 .btn 类（包括 .btn-primary 等）默认设置了 border: 0，这意味着边框根本不存在。而 border-3 只是设置 border-width: 3px，它不会自动补上 border-style 和 border-color。浏览器看到的是 “3px 宽度 + 无样式 + 透明色”，结果就是看不见。
-
border-3必须搭配border（等价于border-style: solid）和border-{color}（如border-primary）才生效 - 即使写了
border-3 border-primary，若没加border，依然无效——border-primary自身也不带style - 工具类优先级低，
.btn的border: 0会覆盖掉未显式声明style的工具类
border-3 在按钮上正确组合写法
要让按钮显示 3px 边框，必须三者齐备：边框存在（border）、有颜色（border-{color}）、有宽度（border-3）。顺序无关，但缺一不可。
- 推荐写法：
class="btn btn-primary border border-primary border-3" - 颜色可换，比如
border-danger或border-dark；非主题色需自定义 CSS 或内联style="border-color: #5d4037" - 注意：Bootstrap 5.3+ 的
border-3对应3px，但部分旧项目若用了自定义 Sass 编译，$border-widths可能被改过，建议检查 CSS 源码确认实际值
比 border-3 更稳的替代方案
直接用 style 或自定义类，避开工具类优先级和依赖问题，尤其适合需要统一管理或响应式调整的场景。
- 内联写法：
class="btn btn-primary" style="border-width: 3px"—— 简单，但无法控制颜色和样式，得额外加border-style: solid; border-color: currentColor - 推荐自定义类：
.btn-thick-border { border-width: 3px !important; }，再配合border和颜色类使用，语义清晰、复用方便 - 如果按钮还用了
box-shadow（如聚焦态），3px 边框可能和阴影重叠显得臃肿，可微调box-shadow: 0 0 0 0.15rem rgba(...)缩小 focus ring
容易被忽略的兼容性细节
加粗边框不是纯视觉装饰，它会影响布局、点击热区和高 DPI 屏幕下的渲染精度。
- 3px 边框会让按钮整体宽高增加 6px（上下/左右各 3px），若按钮处于紧凑容器（如
input-group或btn-group）中，可能触发换行或溢出 - 在 Windows 缩放 125% 或 macOS Retina 屏下，3px 物理像素可能被渲染为 3.75px，导致边缘模糊；此时用
border-width: 0.1875rem（= 3px / 16）更可控 - 深色模式下，
border-primary的颜色变量可能未适配，建议检查$primary是否随prefers-color-scheme动态切换，否则边框会突兀
边框加粗这事，核心就一条：先确保边框“存在”，再谈“多粗”。别指望一个 border-3 能扛起全部责任——它只是宽度开关，不是边框生成器。
