outline仅在focus时显示，用于无障碍焦点提示，非click触发；点击显示边框应使用:active伪类或js切换class配合border/box-shadow实现，禁用outline须提供可访问的替代样式。
outline 不是用来“点击时显示边框”的，它默认是聚焦（focus）时出现的辅助访问样式，不是点击（click）触发的。想实现“点击时显示自定义边框”，得靠 JS 控制 class 切换或直接改 style.border，而不是依赖 outline。
button 的 outline 本质是无障碍焦点提示，不是交互反馈
浏览器给 button 加 outline，只在键盘 tab 聚焦或 JS 主动调用 .focus() 时生效，跟鼠标 click 无关。它设计初衷是让屏幕阅读器用户和键盘操作者知道当前焦点在哪，不是视觉设计师的“点击反馈”工具。
- 点击按钮不会自动触发
:focus（除非你没阻止默认行为或没失焦） -
outline默认带outline-offset，会离元素边缘留空，看起来像“悬浮边框”，但位置不可控 - 禁用
outline后若不提供替代焦点样式（如box-shadow），会违反 WCAG 可访问性要求
点击时显示边框的正确做法：用 class + JS 或 :active
要让按钮“被点击时显示边框”，有两类可靠路径：
-
瞬时反馈（按下去那一下）：用
:active伪类，例如.btn:active { border: 2px solid #007bff; }—— 注意它只在鼠标按下/触摸按住期间生效，松开即消失 -
状态保持（点完还留着）：JS 监听
click，切换一个 class，比如is-clicked，再写.btn.is-clicked { border: 2px solid #28a745; } - 别用
outline模拟——它不响应 click，且无法精确控制四边宽度/颜色/圆角
如果非要用 outline，必须手动控制 focus 状态
极少数场景下（比如模拟开关按钮），你想让点击后 outline 一直显示，就得配合 JS 强制聚焦并防止失焦：
- 点击时调用
btn.focus()，确保进入 focus 状态 - 监听
blur事件，立刻再focus()回来（慎用，影响键盘导航） - CSS 中写
.btn:focus { outline: 2px solid #007bff; outline-offset: 0; }，outline-offset: 0防止边框飘在外面 - 副作用明显：破坏原生 tab 顺序、干扰屏幕阅读器、可能引发循环 focus
真正轻量又可控的替代方案：用 box-shadow 模拟边框
比起折腾 outline，直接用 box-shadow 更灵活、无副作用：
-
box-shadow: 0 0 0 2px #007bff;效果等同于 2px 实线边框，但不占布局空间 - 可同时设多层阴影，比如内边框 + 外发光：
box-shadow: inset 0 0 0 1px #6c757d, 0 0 0 2px rgba(0,123,255,0.2); - JS 切换 class 时，
box-shadow动画比border更平滑（避免重排） - 高 DPI 屏幕下，
box-shadow渲染更稳定，不会像border: 0.5px那样忽隐忽现
真正难的不是加边框，而是决定“这个边框代表什么状态”——是临时反馈？是选中态？还是错误提示？outline 只该用于焦点指示，其它都交给 border、box-shadow 或 class 控制。别让它越界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
