去掉 summary:focus 蓝色轮廓需三步：一是 summary:focus { outline: none !important; }，二是 firefox 下加 summary::-moz-focus-inner { border: 0; }，三是清除 box-shadow 和 -webkit-tap-highlight-color。
summary:focus 时的蓝色轮廓怎么去掉
直接写 summary:focus { outline: none; } 就能去掉点击后残留的蓝色边框，但只写这一句大概率失效。因为浏览器默认只在聚焦状态（:focus）渲染 outline，非聚焦时本就没有可“去掉”的东西；漏掉伪类、被 UI 库覆盖、或没处理 Firefox 的 ::-moz-focus-inner，都会导致样式不生效。
必须同时满足以下三点：
-
summary:focus { outline: none; }是基础，不能写成summary { outline: none; } - 加
!important防止被 Bootstrap/Ant Design 等库用!important覆盖 - Firefox 下还需额外重置：
summary::-moz-focus-inner { border: 0; }，否则仍可能显示虚线
为什么只清 outline 还有黑边/蓝光残留
现代浏览器（尤其 Chrome 和 Safari）对 summary 的焦点反馈往往不止靠 outline：它可能混合了 box-shadow、border-color 或主题色高亮。比如某些设计系统里，summary:focus 实际靠 box-shadow: 0 0 0 2px #007bff; 实现蓝光晕。
所以真正有效的清除方式是组合出击：
summary:focus { outline: none !important; box-shadow: none !important; }- 若使用了 outline-style 的变体（如
outline: 2px solid #007bff），也要一并覆盖 - 部分主题下
border也会随 focus 变色，加一句border-color: transparent !important;更稳妥
如何兼顾可访问性不破坏键盘导航
暴力清空 outline 后，Tab 用户就找不到当前聚焦的 summary 了——这不是视觉问题，是 WCAG 合规风险。正确做法不是“去掉”，而是“换掉”。
推荐用 :focus-visible 做精准控制：
-
summary:focus { outline: none; }—— 默认移除所有 focus 样式 -
summary:focus-visible { outline: 2px solid #007bff; outline-offset: 2px; }—— 仅键盘 Tab 时显示友好轮廓 - 注意兼容性：Safari 目前不支持
:focus-visible（截至 Safari 17.5），需搭配 polyfill 或 fallback 方案
如果项目必须支持旧 Safari，可用 summary:focus:not(:focus-visible) 回退，但需测试是否触发预期行为。
移动端点击后的灰色高亮怎么同步处理
iOS Safari 点击 summary 时出现的半透明灰色 overlay，和 :focus 完全无关，它是 -webkit-tap-highlight-color 的表现。这个属性必须单独设，且只对触摸设备生效。
写法很简单：
summary { -webkit-tap-highlight-color: transparent; }- 别用
rgba(0,0,0,0)，某些 iOS 版本下会失效，transparent最可靠 - 移除 tap highlight 后，建议补上
summary:active { opacity: 0.8; }或轻微缩放，给用户点击确认感
真正容易被忽略的是：这三类样式（outline、box-shadow、-webkit-tap-highlight-color）要同时存在、同时生效，缺一不可。只动其中一项，蓝框/黑边/灰罩总有一样会冒出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
