直接用 outline: none 可隐藏 <summary> 的焦点轮廓，但需配合 tabindex 或显式聚焦才生效；浏览器对 <summary> 的 outline 有特殊逻辑，必须显式设置 outline: none 并建议加 outline-offset: 0，必要时用 !important 或属性选择器提高权重，同时注意可访问性，推荐用 outline-color 或 box-shadow 替代而非完全移除。
summary 元素的:focus-outline 怎么彻底隐藏
直接用 outline: none 就能去掉默认蓝圈，但必须配合 tabindex 或显式聚焦行为才生效；否则浏览器可能忽略该样式，尤其在 Chrome/Firefox 中。
关键点在于：浏览器对 <summary> 的 outline 控制有特殊逻辑——它只在元素获得焦点（keyboard 或 script 触发）时渲染 outline，且默认样式由 UA stylesheet 控制，单纯写 outline: none 在未聚焦状态下不生效，聚焦后也可能被 UA 样式覆盖。
- 必须给
<summary>显式设置outline: none，且建议加上outline-offset: 0防止偏移残留 - 若想确保键盘导航时也不出现 outline，需同时禁用
:focus-visible（但注意这会降低可访问性） - 不要只写
outline: 0——部分旧版 Safari 对0解析不稳定，统一用none
为什么 display: flex 或 position: relative 会让 outline 复现
某些 CSS 布局触发重绘或改变渲染层后，浏览器可能重新应用 UA outline 样式，尤其是当 <summary> 被包裹在 display: flex 容器里，或父级加了 position: relative + z-index 时。
这不是 bug，而是浏览器在层叠上下文变更时重新评估焦点样式来源。此时仅靠 outline: none 不够，必须提高选择器权重并覆盖 UA 规则。
立即学习“前端免费学习笔记（深入）”；
- 用属性选择器强化：例如
summary[role="button"] { outline: none; }（<summary>默认 role 是 button） - 加
!important是最直接解法，虽然不优雅但有效：summary:focus { outline: none !important; } - 避免在
<summary>上设border或box-shadow同时又删 outline ——视觉反馈缺失会让键盘用户迷失焦点位置
保留可访问性前提下怎么“弱化”而非“删除”蓝圈
完全去掉 outline 会损害键盘用户的操作感知，更稳妥的做法是替换为更协调的视觉提示，比如改色、加背景或 border。
- 用
outline-color替代整个 outline：summary:focus { outline-color: #007bff; }（比默认蓝更柔和） - 改用
box-shadow模拟 focus 效果：summary:focus { outline: none; box-shadow: 0 0 0 2px rgba(0,123,255,0.25); } - 如果项目强制要求无 outline，至少保留
summary:focus-visible供键盘用户识别，而鼠标用户不触发：summary:focus:not(:focus-visible) { outline: none; }
Firefox 下 summary:focus-outline 消不掉？检查是否漏了 details
Firefox 对 <summary> 的 outline 渲染依赖其父级 <details> 的状态。如果 <details> 被设了 display: contents 或 visibility: hidden，summary 的 focus 样式可能异常。
- 确认
<details>没有被意外隐藏或脱离文档流 - Firefox 115+ 开始支持
summary::marker，但不支持summary:focus::marker，所以别试图通过伪元素干预 focus 状态 - 真遇到顽固 outline，临时方案：给
<summary>加margin: -2px; padding: 2px;微调，让 outline 落在不可见区域（慎用，影响布局）
overflow: hidden 剪掉了一半，看着像没生效，其实是被裁掉了。 
