不能直接用 outline: none，因为会破坏键盘可访问性及原生交互；应改用 outline: 2px solid transparent 与 outline-offset: -2px 替代，确保焦点链完整且兼容 safari/ios。
summary:focus-outline 为什么不能直接用 outline: none
因为 outline: none 会破坏键盘可访问性——用户用 Tab 键聚焦到 summary 时，屏幕阅读器仍需识别其焦点状态，且原生交互（Space/Enter 触发展开）依赖浏览器对 focus 状态的正确维护。强行移除 outline 可能导致部分 Safari 或旧 Edge 下焦点丢失、键盘操作失效。
真正安全的聚焦样式重置方案
不是“去掉”，而是“替换为无视觉干扰但保功能的样式”：
-
summary:focus必须保留outline，但可设为透明或与背景同色：outline: 2px solid transparent; - 配合
outline-offset: -2px防止外扩占位，避免布局抖动 - 若背景纯白，可用
outline: 2px solid #fff;实现视觉“消失”，同时保持 DOM 焦点链完整 - 禁用
outline: 0或outline: none—— 这在 iOS Safari 中曾导致焦点无法触发 toggle
移动端和 Safari 的额外注意点
iOS Safari（尤其 iOS 16.5 之前）对 summary:focus 的 outline 渲染不稳定，容易出现半截或偏移：
- 必须显式加
tabindex="0"到summary标签上（即使浏览器默认添加，也建议写死） - 避免用
focus-visible做条件样式——目前 Safari 对:focus-visible在summary上的支持率不足 70% - 如需彻底隐藏视觉焦点框又不损功能，唯一可靠方式是：用
outline: 2px solid rgba(0,0,0,0)+outline-offset: -2px，而非透明度或 display hack
千万别碰的“快捷解法”
以下写法看似省事，实则埋雷：
-
summary:focus { outline: none !important; }—— 导致键盘用户无法感知当前焦点位置 -
summary { outline: 0; }—— Chrome 128+ 已警告该用法违反 WCAG 2.4.7 - 给
summary外层套div并监听 click —— 破坏原生details的语义和 keyboard event 绑定 - 用
pointer-events: none再包裹一层 —— 直接让 Space/Enter 失效，且 Safari 会跳过该元素的 focus 流程
真正麻烦的从来不是怎么让框“看不见”，而是看不见之后，Tab 键是否还能正常停驻、Enter 是否依然触发、屏幕阅读器是否仍播报“已折叠，按空格展开”——这些才是不可妥协的底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
