嵌套 details 边框变粗是因浏览器默认 summary 样式与自定义边框叠加所致；应清除 summary 边框、分离内外层边界职责，并用 border-style: hidden 或外层统一边框+内层 margin/background 模拟分隔。
details 标签本身不带边框，嵌套时出现“边框重叠”现象，基本可以确定是浏览器默认的 summary 样式 + 自定义边框叠加导致的视觉加粗，不是 details 渲染逻辑问题。
为什么嵌套 details 会看起来边框变粗
Chrome/Firefox 对 summary 默认渲染为 display: list-item，并自带一个左侧伪元素（▸）和内边距；如果你给外层 details 加了 border，又给内层 summary 或其子元素也加了 border（比如用 button 替换 summary），两者在垂直方向或左右边缘物理重叠，尤其在高 DPR 屏上像素对齐偏移，就会显出双线、颜色加深或错位细缝。
summary 和子 details 的边框职责必须分离
外层 details 控制整体容器边界，内层 summary 只负责触发区域语义——它的视觉边框应该被清除或让渡给父级统一管理。
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 给所有
summary显式设border: none，哪怕它里面包着button或div - 如果要用
button模拟summary，必须同时加appearance: none和border: none，否则按钮默认边框会和父details边框叠加 - 避免在
summary上设padding-left同时又设border-left，左侧容易出现“虚影感”加粗 - 嵌套层级超过两层时，建议只给最外层
details设边框，内部全部靠margin或background-color + padding模拟分隔，避开 border 渲染路径
用 border-style: hidden 替代 border: none 更稳妥
当嵌套结构中某些 summary 需要保留语义但彻底“隐身”边框时，border-style: hidden 比 border: none 更可靠：它参与盒模型计算，能主动让出边框位置，防止相邻元素的边框意外顶上来。
- 对内层
summary写：summary.nested { border-style: hidden; } - 不要只写
border-width: 0，它可能在 Safari 中仍占 layout 空间，导致右侧内容轻微右移 - 若配合
outline做焦点样式，需额外加outline-offset: -1px避免和父边框打架
移动端折叠/展开动画引发的边框错位
用 max-height + overflow: hidden 实现平滑展开时，如果父 details 有 border-bottom，而子 details 在展开瞬间因重排未完成，可能出现底部边框“跳一下”或与上层底边重叠一像素。
- 统一用
border-bottom+margin-bottom组合替代纯边框分隔，留出安全间隙 - 给
details[open] > *:first-child加transform: translateZ(0)强制硬件加速，减少重绘抖动 - 测试时务必打开 Chrome DevTools 的 “Rendering” 面板 → 勾选 “Paint flashing”，看边框区域是否被重复绘制
details 的边框问题，90% 出现在你试图让多层 summary 同时承担视觉边界职责的时候——删掉其中任意一层的 border 声明，往往比调十遍 margin 更快见效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
