summary:focus 的蓝色轮廓是浏览器默认焦点样式，需同时处理 summary:focus、summary::-moz-focus-inner 和 summary:focus:not(:focus-visible) 三处；移除后应提供替代视觉反馈以保障可访问性。
summary:focus 为什么总带蓝色轮廓
点击 <summary></summary> 展开/收起 <details></details> 时出现的蓝色边框，是浏览器对可聚焦元素的默认 outline，不是 bug。它只在获得焦点时显示（鼠标点击或 Tab 键触发），本质和 button:focus、input:focus 行为一致。
直接写 summary:focus { outline: none } 就够了吗
不够——漏掉两个关键点，蓝框大概率还在：
- Firefox 会额外渲染
summary::-moz-focus-inner的内边框，必须单独重置 - 现代浏览器倾向用
:focus-visible控制键盘焦点，而鼠标点击不触发它；只写:focus会导致鼠标点击仍显示蓝框
正确写法要覆盖三处：
summary:focus {
outline: none;
}
summary::-moz-focus-inner {
border: none;
}
summary:focus:not(:focus-visible) {
outline: none;
}
去掉蓝框后，键盘用户怎么知道焦点在哪
完全移除视觉反馈会违反 WCAG 可访问性标准。推荐用以下方式替代：
- 改边框颜色：
border-color: #3b82f6（满足对比度 ≥ 3:1） - 加外发光：
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) - 背景微调：
background-color: #f9fafb（需确保与原背景有足够区分）
注意：不要只对 :focus-visible 设样式，否则鼠标用户点击时无任何反馈，键盘用户 Tab 进来才亮——这会让两者体验割裂。
为什么加了 outline: none 还有蓝边
常见原因不是 CSS 写错了，而是被更高优先级规则覆盖：
- Bootstrap 或其他 UI 库自带
summary:focus样式，需检查 DevTools 的“Computed”面板看哪条生效 - 写了
summary { outline: none }—— 这无效，因为非聚焦状态下本就没有 outline - 用了
!important但没加在所有相关伪类上（比如漏了::-moz-focus-inner）
最稳妥的做法是把这几行放到自定义 CSS 文件末尾，并确保加载顺序在框架样式之后。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
