必须针对summary写summary:focus{outline:none}，并清除Firefox的summary::-moz-focus-inner{border:0}和Safari的-webkit-tap-highlight-color，同时提供box-shadow等替代焦点反馈以满足可访问性要求。
details 标签聚焦时的蓝色高亮边框怎么去掉
直接写 details:focus { outline: none; } 无效——details 元素本身不接受焦点，真正触发高亮的是内部的 summary。你看到的“蓝色边框”其实是 summary:focus 的默认 outline。
- 必须针对
summary写样式：summary:focus { outline: none; } - Firefox 还额外加了一层
summary::-moz-focus-inner边框，得单独清掉：summary::-moz-focus-inner { border: 0; } - 移动端 Safari 点击时可能有半透明点击高亮（非 outline），需加：
summary { -webkit-tap-highlight-color: transparent; } - 别漏掉键盘用户：去掉 outline 后，务必提供替代焦点指示，比如
summary:focus { background-color: #f5f5f5; box-shadow: 0 0 0 2px #007bff; }
为什么 summary 去了 outline 还有残留虚线
常见于 Firefox —— 它对 summary 的焦点态有两层渲染：一是标准 outline，二是私有伪元素 ::-moz-focus-inner 插入的 border。只清 outline 不够，这个 border 会撑开内边距、留下视觉错觉。
-
summary::-moz-focus-inner是 Firefox 特有，且默认带border: 1px dotted ButtonText - 必须显式设为
border: 0，不能只靠outline: none - 该伪元素还可能影响垂直对齐，顺手加
padding: 0; margin: 0;更稳妥
details + summary 的可访问性边界在哪
移除高亮边框本身不破坏可访问性，但移除后没补任何焦点反馈，就会让键盘用户完全迷失当前聚焦位置。这不是细节问题，是 WCAG 2.4.7（焦点可见性）的硬性要求。
-
details和summary天然支持屏幕阅读器（自动播报“展开/收起”状态），这点千万别用display: none或visibility: hidden破坏 - 自定义焦点样式时，避免仅靠颜色变化（如只改背景色），要叠加形状或阴影等视觉维度
- 如果项目启用了
prefers-reduced-motion，box-shadow动画应降级为静态边框，否则可能触发眩晕
