怎么用HTML的details标签和CSS制作带阴影的展开名片-html教程-PHP中文网

为details添加阴影和圆角需同时设置details和summary的border-radius（均8px）、details的box-shadow与overflow: hidden，否则折叠时顶部圆角被裁；箭头用伪元素重绘并居中；展开动画用max-height过渡而非height；移动端需transform: translatez(0)提响应、防截断。

怎么用html的details标签和css制作带阴影的展开名片

details标签默认样式太简陋，怎么加阴影和圆角

原生 <details></details> 没有阴影、边框、圆角，直接加 box-shadow 和 border-radius 无效——因为浏览器对 <details></details> 的部分样式（尤其是折叠态）做了 UA 样式锁定。真正起作用的是给它的直接子元素 <summary></summary> 和整个 <details></details> 容器分别处理。

关键点：阴影必须加在 <details></details> 上，但圆角要同时加在 <details></details> 和 <summary></summary> 上，否则折叠时顶部圆角会被裁掉；还要用 overflow: hidden 防止内容溢出破坏圆角效果。

实操建议：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

给 <details></details> 设置 border-radius: 8px、box-shadow: 0 2px 12px rgba(0,0,0,0.1)、overflow: hidden
给 <summary></summary> 同样设 border-radius: 8px（只设 top-left/top-right），并用 margin: 0 清除默认外边距
禁用 <summary></summary> 默认的列表符号：用 list-style: none，再手动加右箭头更可控

summary点击区域小、图标不居中，怎么扩大可点范围

原生 <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></details> 展开是 DOM 显示/隐藏切换，CSS 的 height 或 opacity 过渡不起作用——因为高度从 auto 无法动画。硬设固定高度会破坏内容自适应。

实操建议：

不用 height 过渡，改用 max-height + overflow: hidden：折叠时设 max-height: 0，展开时设一个足够大的值（如 max-height: 500px）
给 <details></details> 内容区（即 <summary></summary> 后的兄弟节点）加 transition: max-height 0.3s ease-in-out
注意：如果内容高度超过 max-height 设定值，会截断；500px 覆盖多数名片内容（头像+3行文字+1个按钮），够用
避免用 opacity 单独过渡，会导致点击穿透或焦点丢失