btn-outline-类创建透明背景描边按钮，点击后黑边是浏览器默认outline聚焦反馈，并非bug；应使用:focus-visible精准控制焦点样式以兼顾可访问性。
btn-outline- 类就是 Bootstrap 里专用于创建「描边按钮」的样式，它保留主题色边框、背景透明，不加额外 CSS 就能直接用。
为什么 btn-outline-primary 按钮点击后有黑边？
这不是 bug，是浏览器默认的 outline 聚焦反馈（尤其 Chrome/Firefox），用于辅助访问。但和 Bootstrap 自带的描边冲突，视觉上像多了一圈黑线。
- 真实触发时机：键盘 Tab 切换聚焦，或鼠标点击后未失焦时仍存在
- 不是
border，所以改border-color没用 - Bootstrap 5 默认已重置部分
outline，但老项目或自定义主题里仍常见
如何安全移除点击/聚焦黑边而不影响可访问性？
直接删 outline: none 会损害键盘用户操作体验，推荐用 :focus-visible 精准控制：
.btn-outline-*:focus-visible {
outline: 2px solid rgba(0, 123, 255, 0.25);
outline-offset: 2px;
}
- 仅在键盘聚焦时显示柔和蓝边，鼠标点击后自动消失
- 保持 WCAG 2.1 可访问性要求
- 避免全局写
*:focus { outline: none }，会误杀所有控件
btn-outline- 和普通 btn- 的实际渲染差异
表面看只是「有无背景色」，但底层行为差异明显：
-
btn-primary：背景色 + 白字 + 边框色 ≈ 主色填充；悬停时背景加深，边框不变 -
btn-outline-primary：透明背景 + 主色边框 + 主色文字；悬停时背景变为主色、文字变白（自动反转） - 禁用状态：
btn-outline-*的边框和文字都会变浅灰（opacity: 0.65），而普通按钮只降 opacity - 不要混用：
btn btn-outline-primary btn-primary会导致样式覆盖混乱，选其一即可
ttkbootstrap 中的 outline 样式怎么对应？
Python 的 ttkbootstrap 不用 class 名，而是通过 bootstyle 参数控制：
-
Button(bootstyle="outline")→ 等效 Bootstrap 的btn-outline-primary -
Button(bootstyle="danger-outline")→ 等效btn-outline-danger - 注意顺序：
"outline-danger"是错的，必须是"danger-outline" - 它不依赖外部 CSS，所以不会出现浏览器 outline 黑边问题——但焦点虚线环（
focus ring）仍存在，需用focuscolor参数调整
描边按钮真正难搞的不是写法，是聚焦态和可访问性的平衡点。很多人删了 outline 图省事，结果键盘用户卡在某个按钮上不知道自己聚焦在哪——那比黑边更致命。
