layui按钮点击后蓝边由:focus触发，本质是浏览器对可聚焦元素的默认焦点反馈；:active仅在按下时短暂叠加，导致“闪一下”。
layui按钮点击后蓝边是:focus还是:active触发的
layui按钮点击后出现的蓝色边框，本质是浏览器对可聚焦元素（button）在获得焦点时的默认视觉反馈，由 :focus 伪类触发，不是 :active（按下态）主导。但鼠标点击过程会短暂触发 :focus + :active 叠加，导致蓝边“闪一下”。Layui 自身未额外添加 box-shadow 或 outline，所以问题根源在浏览器默认行为 + layui 按钮本身可聚焦（tabindex="0" 或原生 button 天然可 focus）。
直接写outline: none为什么有时无效
常见失效原因有三个：
- 没加
!important：layui 内置 CSS 或某些 UI 框架（如配合 Bootstrap 使用）可能带高权重样式，仅outline: none被覆盖 - 只写了
:focus，漏了:active:focus：鼠标按下未松开时仍处于焦点态，该状态下的 outline 会被单独渲染 - 用了全局重置如
* { outline: none }：这会干掉表单输入框、链接等所有焦点提示，损害键盘可访问性，且 layui 表格编辑单元格、colorpicker 触发器等依赖 focus 的交互也会变“不可见”
推荐的 CSS 写法（适配 layui 2.x 全版本）
针对 layui 原生按钮（class="layui-btn"），应精准覆盖以下状态组合，不伤其他组件：
.layui-btn:focus,
.layui-btn:active:focus {
outline: none !important;
}
如果项目中还混用了 Bootstrap 或自定义 button，可扩展为：
button.layui-btn:focus,
button.layui-btn:active:focus,
a.layui-btn:focus,
a.layui-btn:active:focus {
outline: none !important;
}
注意：!important 在这里必要；选择器必须包含 :active:focus，否则点击瞬间蓝边仍会闪现。
去掉蓝边后，键盘用户怎么办
这是最常被忽略的实际后果——移除 outline 后，用 Tab 键导航的用户将完全无法判断当前聚焦在哪。Layui 没提供内置替代方案，你需要手动补一个视觉反馈：
- 用
box-shadow模拟温和焦点环：box-shadow: 0 0 0 2px rgba(0,150,136,.3)（颜色可按主题调） - 或改背景色：
background-color: #e6f7ff !important;（需同时设transition避免突兀） - 更稳妥的做法是只在非键盘操作时隐藏：
.layui-btn:focus:not(:focus-visible) { outline: none; }，但需确认目标浏览器支持:focus-visible（Chrome 86+、Firefox 78+、Safari 15.4+）
上线前务必用键盘 Tab 测试所有按钮，确认焦点移动时仍有清晰视觉指示。虚线框消失容易，焦点“消失”才是真问题。
