自带“边框感”实为UA样式叠加所致，需同时重置outline、margin、padding和list-style四类默认行为，仅清border无效；iOS Safari还需加-webkit-appearance: none并补cursor: pointer。
为什么 <details></details> 会自带“边框感”？
不是真有 border，而是浏览器 UA 样式给 <details></details> 加了默认 outline、margin 和 padding，部分内核（如 Safari）还会渲染 summary 的 focus 状态边框或下划线。视觉上像“灰色细框”或“点击后蓝线”，尤其在深色背景里特别扎眼。
<details></details> 和 <summary></summary> 必须同时重置的样式项
只清 border 没用，关键要覆盖这四类 UA 默认行为：
-
outline：focus 时的环形轮廓（Chrome/Safari 均存在） -
margin：<details></details>默认上下有 margin，造成“空隙假边框” -
padding：<summary></summary>默认左右有 padding，缩进导致内容不对齐 -
list-style：<summary></summary>默认带 disclosure triangle（小箭头），某些 UA 渲染为 border-like 图形
推荐最小化重置写法：
details {
margin: 0;
border: none;
}
details > summary {
list-style: none;
padding: 0;
outline: none;
}
details > summary::marker {
content: "";
}
移动端 Safari 的 focus 边框为何清不掉？
iOS Safari 对 <summary></summary> 的 focus 状态有强 UA 样式，仅靠 outline: none 不生效。必须配合 -webkit-appearance: none 才能真正剥离原生交互外观：
立即学习“前端免费学习笔记（深入）”；
-
-webkit-appearance: none要加在summary上，不是details - 加完后需手动补
cursor: pointer，否则点击区域无反馈 - 若需保留可访问性焦点指示，建议用
box-shadow: 0 0 0 2px #007bff替代 outline
完整防 Safari 失效写法：
details > summary {
-webkit-appearance: none;
appearance: none;
cursor: pointer;
outline: none;
}
折叠展开后内容区域仍有“底边”？
这不是边框，是 <details></details> 展开时内部内容触发的 margin 折叠（margin collapse）或父容器的 border-bottom 透出。排查顺序如下：
- 检查
details父元素是否带border-bottom或box-shadow - 确认展开内容第一行子元素（如
p、div）没带margin-top - 若用 flex/grid 布局包裹
details，注意align-items: baseline可能导致底部对齐错位，改用flex-start
最稳妥的收尾控制：
details[open] > *:first-child {
margin-top: 0;
}
真正干净的折叠组件，难点不在展开逻辑，而在于逐层击穿浏览器对 summary 的“拟物化” UA 样式——它不像普通元素那样只听 border 和 outline，还藏着 ::marker、appearance 和 focus 伪类的三重绑定。 
