为details添加阴影和圆角需同时设置details和summary的border-radius（均8px）、details的box-shadow与overflow: hidden，否则折叠时顶部圆角被裁；箭头用伪元素重绘并居中；展开动画用max-height过渡而非height；移动端需transform: translateZ(0)提响应、防截断。
details标签默认样式太简陋，怎么加阴影和圆角
原生 <details> 没有阴影、边框、圆角，直接加 box-shadow 和 border-radius 无效——因为浏览器对 <details> 的部分样式（尤其是折叠态）做了 UA 样式锁定。真正起作用的是给它的直接子元素 <summary> 和整个 <details> 容器分别处理。
关键点：阴影必须加在 <details> 上，但圆角要同时加在 <details> 和 <summary> 上，否则折叠时顶部圆角会被裁掉；还要用 overflow: hidden 防止内容溢出破坏圆角效果。
实操建议：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 给
<details>设置border-radius: 8px、box-shadow: 0 2px 12px rgba(0,0,0,0.1)、overflow: hidden - 给
<summary>同样设border-radius: 8px（只设 top-left/top-right），并用margin: 0清除默认外边距 - 禁用
<summary>默认的列表符号：用list-style: none，再手动加右箭头更可控
summary点击区域小、图标不居中，怎么扩大可点范围
原生 <summary> 点击热区仅限文字区域，且默认箭头位置偏右、大小固定。用户常点不中，尤其在移动端。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 用
padding: 12px 16px扩展点击区域，比单纯调大字体更可靠 - 移除原生箭头：
summary::-webkit-details-marker { display: none; }（Chrome/Safari） +summary::marker { content: "" }（Firefox/新标准） - 用伪元素重绘箭头：
summary::after+transform: rotate(0deg)控制展开/收起状态，配合transition实现平滑转动 - 把
summary设为display: flex，用justify-content: space-between和align-items: center确保图标垂直居中
展开后内容抖动、高度突变，怎么实现平滑过渡
<details> 展开是 DOM 显示/隐藏切换，CSS 的 height 或 opacity 过渡不起作用——因为高度从 auto 无法动画。硬设固定高度会破坏内容自适应。
实操建议：
- 不用
height过渡，改用max-height+overflow: hidden：折叠时设max-height: 0，展开时设一个足够大的值（如max-height: 500px） - 给
<details>内容区（即<summary>后的兄弟节点）加transition: max-height 0.3s ease-in-out - 注意：如果内容高度超过
max-height设定值，会截断；500px 覆盖多数名片内容（头像+3行文字+1个按钮），够用 - 避免用
opacity单独过渡，会导致点击穿透或焦点丢失
移动端点击无反馈、展开后文字被截断
在 iOS Safari 或部分安卓 WebView 中，<summary> 可能响应延迟，或展开后因 viewport 缩放导致文字换行异常、末尾省略。
实操建议：
- 强制启用硬件加速提升点击响应：
summary { transform: translateZ(0); } - 防止文字截断：给内容区设
word-break: break-word和hyphens: auto（需测试 Safari 支持） - 确保
<details>不被父容器的overflow: hidden剪切——常见于卡片网格布局中 - 在
<meta name="viewport">中确认没有user-scalable=no，否则双击缩放失效，影响阅读体验
细节决定成败：阴影层级、圆角匹配、max-height 的安全阈值、移动端 transform 触发，漏掉任意一点都可能让“展开名片”看起来廉价或难用。
