summary的outline无法仅用outline: none清除，需同时设置summary:focus、summary::-webkit-details-marker、summary::-moz-focus-inner等规则，并注意可访问性影响。
summary元素默认outline无法用outline: none直接清除
浏览器对summary元素有特殊的焦点样式逻辑，单纯写outline: none在部分浏览器（尤其是Chrome/Firefox）中可能无效，因为原生details/summary组合会强制渲染焦点轮廓，尤其在键盘聚焦时。
真正起效的方式是覆盖其伪元素和:focus状态的组合样式：
- 必须同时设置
summary:focus和summary::-webkit-details-marker（仅WebKit）相关规则 - 需添加
outline-offset: -2px等微调值来抵消浏览器默认偏移 - 若使用
details[open]切换状态，还要注意summary在展开/收起时的重绘行为可能触发outline重显
正确移除summary outline的CSS写法
以下规则可稳定禁用summary的外边框（包括鼠标点击和Tab键聚焦）：
summary {
outline: none;
}
summary:focus {
outline: none;
}
summary::-webkit-details-marker {
display: none;
}
/* 防止Firefox在聚焦时仍显示浅灰轮廓 */
summary::-moz-focus-inner {
border: 0;
}
注意：::-moz-focus-inner是Firefox专属伪元素，不加它的话，Firefox下点击summary仍可能出现1px内边框——这不是outline，而是其内部焦点环，必须单独清零。
为什么不能只靠:focus + outline: none？
因为summary的焦点行为被浏览器深度绑定到details的可访问性实现中。即使你写了outline: none，某些版本Chrome仍会在键盘Tab进入时短暂闪现outline，根源在于：
- 浏览器把
summary当作“可操作控件”，强制赋予焦点反馈 -
outline被部分渲染引擎视为“无障碍必需样式”，仅靠CSS重置不够彻底 - 若页面启用了高对比度模式（Windows），
outline可能被系统策略强制恢复
所以更稳妥的做法是：用border模拟焦点态，或配合tabindex="-1"移除键盘可聚焦性（但会损害可访问性，慎用）。
兼容性与可访问性提醒
完全隐藏summary的焦点样式，会降低键盘用户的操作确定性。如果设计允许，建议保留视觉反馈，只是换一种形式：
- 用
box-shadow: 0 0 0 2px #007bff替代outline，更可控 - 通过
:focus-visible做渐进增强：summary:focus-visible { outline: 2px solid #007bff; } - 避免在
summary上设置user-select: none，否则Safari可能干扰焦点捕获
真正难处理的不是代码怎么写，而是得在「视觉干净」和「键盘用户能明确知道当前焦点在哪」之间做取舍——这个平衡点，往往要靠真实键盘测试才能确认。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
