按钮点击后无轮廓是:focus态被覆盖，bootstrap用box-shadow模拟焦点环，需通过修改rgba颜色或覆盖.box-shadow解决，并注意:focus-visible逻辑及深色模式适配。
点击后轮廓颜色不出现？先确认是不是:focus态被覆盖
Bootstrap 5 按钮点击后出现的“轮廓”其实是 :focus 态（键盘 Tab 进入或鼠标点击后短暂保留），不是 :active。如果你点了按钮没看到蓝圈，大概率是以下情况之一：
— 浏览器默认焦点样式被重置库（如 normalize.css）清掉了
— 你的自定义 CSS 里写了 *:focus { outline: none; } 或 .btn:focus { outline: 0; }
— Bootstrap 自身的 .btn:focus 规则被更高权重的选择器压过（比如用了 !important 的第三方样式）
.btn:focus-outline-color 不是 Bootstrap 变量，别搜这个
Bootstrap 官方没有 --bs-btn-focus-outline-color 或类似变量名。它用的是 box-shadow 模拟焦点环，核心属性是：
— box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), .25);（对 .btn-primary）
— 颜色来源是 --bs-primary-rgb，透明度由 .25 控制
所以改轮廓颜色，本质是改对应主题色的 RGB 值，或直接覆盖 box-shadow
直接覆盖.btn:focus的box-shadow最可靠
无需动 Sass 或整套变量链，日常项目中最快生效的方式是写一条高权重 CSS：
— 必须放在 Bootstrap CSS 之后加载
— 推荐按按钮类型单独写，避免全局污染
— 记得保留 outline: 0 防止双焦点环（原生 + 自定义）
例如把 .btn-primary 的焦点环改成紫色：
.btn-primary:focus {<br> outline: 0;<br> box-shadow: 0 0 0 0.25rem rgba(106, 90, 205, .25);<br>}
注意：
rgba(106, 90, 205, .25) 是 #6a5acd 的 RGB 形式，不能写十六进制；透明度建议保持 .25，太低看不见，太高遮挡内容
移动端点按后轮廓不消失？检查:focus-visible逻辑
真机上点一下按钮，轮廓一直挂着不收，通常是因为浏览器把鼠标操作也当作了“键盘焦点”，触发了 :focus 并未自动释放。这不是样式问题，而是交互逻辑：
— 不要依赖 :focus 做“点击即消失”的视觉反馈
— 如需点击后立刻移除轮廓，可用 JS 在 click 事件里调 el.blur()
— 更推荐方案：用 :focus-visible 替代 :focus（需加 polyfill 支持旧浏览器），它只在键盘操作时显示轮廓，鼠标点击完全不触发
真正容易被忽略的是：轮廓颜色不是独立可调的“边框”，它依附于主题色计算链。改一个按钮的 box-shadow 很快，但若项目要支持深色模式或主题切换，必须同步更新 --bs-primary-rgb 和 [data-bs-theme="dark"] 下的对应值，否则暗色背景下轮廓会发灰甚至不可见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
