details 默认无边框和背景，需先设 border 或 background 才能使 border-radius 生效；再加 overflow: hidden 防内容溢出，显式设 display: block 确保布局稳定。
details 标签本身没有默认边框，直接加 border-radius 不会“显形”——你得先给它加 border 或 background，否则圆角无处依附。
为什么 details 加 border-radius 没反应
浏览器对 details 的渲染是“透明容器”，它默认 border: none、background: transparent，且不参与盒模型的边框渲染。即使写了 border-radius: 8px，也因无边框/背景可裁切而完全不可见。
- 用开发者工具检查 computed styles，
border一栏基本是none -
details是替换元素（replaced element-like），但不像video或input那样自带可样式化边框 - 仅靠
summary子元素的圆角无法传导到整个details容器
正确设置圆角边框的三步法
必须显式定义轮廓，再施加圆角：
- 给
details设border: 1px solid #ddd（或outline）+border-radius: 6px - 加
overflow: hidden—— 关键！防止内部summary和后续内容在展开时顶破圆角 - 确保
details有明确的display行为：默认是display: block，但若父容器是 flex/grid，建议显式写display: block避免意外收缩
示例 CSS：
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
.rounded-details {
border: 1px solid #e0e0e0;
border-radius: 0.5em;
overflow: hidden;
display: block;
}
summary 的圆角要不要单独处理
不需要。只要 details 自身带边框和 overflow: hidden，summary 就会自然被裁切进圆角内。但要注意：
- 如果
summary用了负 margin、绝对定位或 transform，可能溢出圆角区域，此时需重置其position或加padding留白 - 不要给
summary单独设border-radius，否则与外层不一致，视觉割裂 - 展开后的内容（
details的子节点）若含块级元素，建议统一用box-sizing: border-box防止 padding/border 导致宽度撑破
移动端和 Safari 的兼容注意点
现代浏览器（Chrome/Firefox/Safari ≥ 16）都支持，但有两个易忽略细节：
- iOS Safari（≤ 15.6）对
details的overflow: hidden支持不稳定，展开动画中可能出现短暂直角“闪现”——加will-change: contents可缓解 - 安卓 WebView（尤其旧版 Chrome for Android）中，若
details套在flex容器里且未设宽高，border-radius可能失效；建议父容器加min-width: 0或显式width - 无障碍方面：
border-radius不影响焦点环，但若用outline替代border，记得加outline-offset: -2px对齐视觉边界
真正卡住人的不是语法，而是忘了 details 默认没边框也没背景——它不像 div 那样“有形”，得先把它“画出来”，圆角才有地方落脚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
