点击details的summary出现的“外边框”实为浏览器自动添加的:focus outline，非border所致；应通过outline: none清空默认样式，再用box-shadow替代实现可控焦点反馈，同时处理-webkit-tap-highlight-color和::marker兼容性问题。
details标签点击后出现外边框，其实是:focus轮廓
点击<summary>时看到的“外边框”，90%不是<details>或<summary>自己画的，而是浏览器给可聚焦元素（比如<summary>）自动加的outline。它和border无关，删border完全没用。
默认行为是：鼠标点击或键盘Tab到<summary>时，触发:focus伪类，显示蓝色/虚线轮廓——这是为可访问性设计的，不能直接砍掉。
- 别写
summary:focus { outline: none; }，这会让键盘用户彻底找不到焦点位置 - 检查是否全局重置了
outline（比如用了normalize.css或reset.css），它们常把outline设成auto，反而更难覆盖 - 某些旧版 Safari 会忽略
outline: solid而坚持渲染auto，必须先显式声明outline-style: solid
安全隐藏点击边框的写法（保留可访问性）
真正要做的不是“去掉边框”，而是把默认outline换成你可控的视觉反馈。以下是最小可行方案：
summary {
outline: none;
}
summary:focus {
outline-style: solid;
outline-width: 2px;
outline-color: transparent;
outline-offset: 2px;
box-shadow: 0 0 0 2px #007bff;
}
-
outline: none只是清空默认样式占位，不等于移除焦点指示 -
outline-color: transparent配合outline-offset留出空间，避免box-shadow被裁剪 -
box-shadow替代outline，颜色、大小、圆角都可调，且不影响布局流 - 若项目支持现代浏览器，可用
:focus-visible进一步区分：只在键盘聚焦时显示box-shadow，鼠标点击后不显示
移动端点击闪动/灰色遮罩干扰
iOS Safari 和部分安卓 WebView 在点击<summary>时，会叠加一层半透明-webkit-tap-highlight-color，看起来像“边框突变”或“背景闪一下”。这不是 CSS outline，得单独处理：
立即学习“前端免费学习笔记（深入）”；
- 加
summary { -webkit-tap-highlight-color: transparent; }可消除该高亮，但注意：这会同时去掉所有 tap 反馈，慎用于表单控件 - 如果
<summary>内含图标或文字排版复杂，优先用appearance: none重置原生样式，再手动定义border和focus态 -
appearance: none需加前缀：-webkit-appearance: none;和-moz-appearance: none;
Safari对details[open]和::marker的样式穿透问题
Safari 目前不支持summary::marker在details[open]状态下的条件样式穿透，也就是说，即使你写了details[open] summary::marker { content: ""; }，三角图标仍可能残留。这不是边框，但常被误认为“点击后多了一条线”。
- 放弃
::marker，改用list-style: none+summary::before手动插入图标（如▼或 SVG） - 用
@supports (selector(details[open]))做特性检测，Safari 不支持时降级为纯文字提示 - 若用
max-height做展开动画，确保details有overflow: hidden，否则 Safari 下内容可能撑破容器导致“边框错觉”
最常被忽略的是：所谓“外边框”，往往根本不是 border，而是 outline、tap highlight、marker 图标、甚至父容器的 box-shadow 叠加出来的视觉误差。先用浏览器 DevTools 的“Computed”面板逐层检查真实生效的 outline/border/box-shadow 值，比盲目删样式高效得多。
