summary 元素默认 outline 不能直接用 outline: none，因其为可聚焦元素，Chrome/Edge 等浏览器会用 :focus-visible 覆盖该声明；需同时设置 :focus 和 :focus-visible 伪类，并重置 outline-offset 才能生效。
summary 元素默认 outline 为什么不能直接用 outline: none
因为 summary 是可聚焦的交互元素（类似 button），浏览器对它的 focus 状态有 UA 样式控制，单纯写 outline: none 在部分浏览器（尤其是 Chrome/Edge）下会被 UA 的 :focus-visible 规则覆盖，实际无效。
真正生效的前提是：必须同时处理 :focus 和 :focus-visible 两个伪类，且确保选择器权重足够高。
- 只写
summary:focus { outline: none; }→ Safari 可能生效，Chrome 大概率失效 - 没加
!important且被 UA 样式或框架样式覆盖 → 蓝框照常出现 - 用了
outline: 0但没清空outline-offset→ 边框位置可能偏移，视觉仍异常
推荐写法：兼顾可访问性与视觉控制
完全去掉蓝框最稳妥的方式是显式重置 outline 相关所有属性，并避免破坏键盘导航体验：
summary:focus,
summary:focus-visible {
outline: none;
outline-offset: 0;
}
如果项目明确不需要键盘焦点反馈（比如仅用于鼠标点击的折叠面板），可以这样写；但注意：这会降低键盘用户可用性，WCAG 不推荐无条件移除 focus 样式。
立即学习“前端免费学习笔记（深入）”；
- 必须同时声明
outline-offset: 0，否则某些浏览器残留偏移导致“虚影” - 不要只针对
summary，要带上:focus-visible，否则新版 Chromium 内核下无效 - 若使用 CSS-in-JS 或 Shadow DOM，需确认样式作用域是否覆盖到
summary
替代方案：用自定义 focus 样式代替“去掉”
更合理的选择不是消灭 outline，而是替换它——保留可访问性，提升一致性：
summary:focus,
summary:focus-visible {
outline: 2px solid #007bff;
outline-offset: 2px;
outline-style: solid;
}
- 用
outline-style: solid替代浏览器默认的auto（后者在不同系统渲染差异大） - 设置
outline-offset控制距离，避免紧贴文字造成拥挤 - 颜色选品牌色或对比度 ≥ 4.5:1 的色值，满足 WCAG AA
检查是否生效的三个关键点
即使写了 CSS，蓝框还在？先排查这几个地方：
- 开发者工具里看 computed styles，确认
outline确实被覆盖，而不是被其他规则（如 reset.css、Bootstrap）重置回默认值 - 用键盘 Tab 切换焦点，观察是否真触发了
:focus-visible（鼠标点击时部分浏览器不触发该伪类） - 检查是否用了
details[open] summary这类更具体的选择器，意外提高了优先级，反而让你的规则不生效
真正麻烦的从来不是那行 outline: none，而是浏览器如何判断“这个 focus 值得显示 outline”。细节藏在 focus-visible 的触发逻辑和样式层叠顺序里。
