:active伪类实现按钮按压边框反馈，需确保元素可交互、无pointer-events阻断、避免overflow裁剪、合理设置transition及iOS兼容处理。
用 :active 伪类控制按钮按压时的边框样式
按钮按压反馈边框的本质，是用户按下鼠标或触控时触发的视觉变化。HTML5 本身不提供“按压边框”功能，完全依赖 CSS 的 常见错误是只写 即使语法正确， iOS Safari 默认会延迟或禁用 立即学习“前端免费学习笔记（深入）”； 关键是 真正需要兼顾键盘操作时，应分别定义： 这样键盘焦点走的是 边框按压反馈看似简单，但跨端一致性、可访问性、CSS 层叠优先级这三处最容易出问题。别只盯着“怎么变”，先确认“为什么不变”。:active 伪类实现。关键在于：必须确保该伪类能被正确触发——这意味着按钮得是可交互元素（如 或带 tabindex 的 pointer-events: none 或 user-select: none 意外阻断。
:hover 却漏掉 :active，结果悬停有变化、点击没反馈；或者写了 :active 但边框颜色/宽度改得不明显（比如只从 1px solid #ccc 变成 1px solid #bbb），人眼几乎看不出区别。
标签，它原生支持 :active，无需额外设置 tabindex 或 role
2px solid #e0e0e0，按压态 3px solid #4285f4）:active 支持较弱，常需配合 touchstart 事件临时加 class 来补全避免
:active 失效的三个典型场景:active 也可能“看起来没反应”，多因以下干扰：
overflow: hidden 且按钮边框变宽后被裁剪——检查按压时是否真没画出来，还是被切掉了:active 样式，比如写了 button:focus { outline: none; } 却忘了 button:active:focus 的兼容写法transition 但未在 :active 中声明过渡属性，导致边框突变不平滑（或干脆卡住）；正确做法是把 transition 写在常态规则里，如 button { transition: border 0.15s ease; }
兼容 iOS Safari 的轻量级 fallback 方案
:active 样式，尤其在非 元素上。不引入 JS 框架的前提下，可用极简方式修复：button {
-webkit-tap-highlight-color: transparent;
}
button:active {
border: 3px solid #34a853;
}
-webkit-tap-highlight-color: transparent —— 它关闭系统默认的灰色点击蒙层，让 :active 样式有机会显示。若仍不生效，说明页面启用了 viewport 的 user-scalable=no 或 maximum-scale=1，此时必须用 JS 补充 class 切换。不要用
:focus 替代 :active 做按压反馈:focus 表示键盘焦点（Tab 键切换），不是鼠标/手指按压状态。两者语义和触发时机完全不同：:focus 在按钮获得焦点后持续存在，直到焦点离开；而 :active 仅在按下瞬间激活。混用会导致键盘用户看到“一直按着”的错觉，也违背 WCAG 可访问性原则。button:focus {
outline: 2px solid #4285f4;
outline-offset: 2px;
}
button:active {
border: 3px solid #4285f4;
}
outline，指针按压走的是 border，互不干扰。
