outline: none 对 <summary> 无效是因为其 focus outline 由浏览器渲染层硬编码，Safari 等旧版本完全忽略该声明；可行方案是用 outline-offset: -999px 移出视口或 box-shadow 覆盖，默认 :focus-visible 不可靠，需显式设 tabindex="0" 并处理 -webkit-tap-highlight-color。
summary:focus 为什么加 outline: none 没用
因为浏览器对 <summary> 的聚焦样式控制非常严格，部分版本（尤其是 Safari）会忽略 outline: none，即使写了也照常显示默认蓝框或黑虚线。这不是你写错了，而是它压根不响应这个声明——summary 的 focus outline 是硬编码在渲染层的，不是标准可覆盖的 CSS 层级。
- Firefox 129+、Chrome 125+ 支持
summary::focus伪类，但 Safari 直到 iOS 17.4 才开始有限支持，旧版完全无视 -
summary:focus { outline: none; }在 Safari 中无效，且可能被 UA 样式表强制覆盖 - 直接给
summary设outline: 0或outline: transparent同样无效，甚至触发降级渲染
真正能生效的两种写法
必须绕过 focus outline 本身，转而用视觉替代方案“遮盖”它。核心思路是：让 outline 出现在不可见区域，或用更强的 box-shadow / border 把它盖住。
- 用
outline-offset: -999px把 outline 移出视口：summary:focus { outline: 2px solid transparent; outline-offset: -999px; } - 用
box-shadow覆盖默认轮廓：summary:focus { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3b82f6; }（内白边+外蓝环，视觉上吞掉原生 outline） - 若需完全“隐形”，加
border: 2px solid transparent并确保background-clip: padding-box，防止边框透出
别踩的坑：summary:focus-visible 不可靠
:focus-visible 理论上能区分键盘/鼠标聚焦，但在 <summary> 上基本失效——多数浏览器（包括当前最新 Safari 17.6）根本不触发该伪类，哪怕用户用 Tab 键导航过去。
- 不要写
summary:focus:not(:focus-visible) { outline: none; }，它在 Safari 和旧 Edge 下等于没写 -
tabindex="0"必须显式加在<summary>上，否则部分浏览器连 focus 状态都不触发，更别说 focus-visible - 替代方案：监听
details.addEventListener('toggle', ...)，比依赖 CSS 伪类更稳
移动端点击后残留灰框怎么处理
那不是 outline，是 iOS Safari 的 -webkit-tap-highlight-color，点击瞬间闪一下的半透明 overlay，和 focus 完全无关，但用户感知上就是“点了有框”。
立即学习“前端免费学习笔记（深入）”；
- 加这条规则即可：
summary { -webkit-tap-highlight-color: transparent; } - 注意：设成
rgba(0,0,0,0)在 iOS 16.5+ 会失效，必须用transparent - 搭配
summary:active { opacity: 0.8; }提供点击反馈，否则用户会觉得没点上
