details标签不支持原生圆圈展开动画，需用css的transform: scale()或clip-path配合其open状态实现视觉效果，同时保留语义与无障碍支持。
details 标签本身不支持圆圈展开动画
原生 details 的展开是垂直方向的线性高度变化，浏览器不提供径向（圆形）展开的 DOM 行为或 CSS 属性。所谓“圆圈展开”，必须脱离 details 的语义容器，改用纯 CSS + transform: scale() 或 clip-path 实现视觉效果——details 在这里只适合做状态开关（比如控制 open 布尔值），不能直接驱动圆形动画。
用 details 控制状态，用 CSS 实现圆形展开视觉
你可以保留 details 的语义和无障碍能力（键盘操作、屏幕阅读器支持），但把动画逻辑完全交给其子元素。关键不是动 details 或内容区的高度，而是用 scale 和 opacity 从中心点放大一个容器：
- 给
summary设为相对定位，作为动画锚点 - 在
summary后紧跟一个<div class="circle-panel">，初始 <code>opacity: 0; transform: scale(0); - 利用
details[open] .circle-panel触发opacity: 1; transform: scale(1); - 必须加
transition: opacity 0.4s, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)—— 贝塞尔曲线能模拟“弹出感” -
.circle-panel需设position: absolute; top: 100%; left: 50%; transform-origin: top center;，再用transform: translateX(-50%) scale(0)精确对齐中心 - 纯 CSS 方案：用
@property（仅 Chromium 115+ 支持）定义自定义动画属性，配合clip-path: circle(var(--r) at 50% 0) - 兼容方案：监听
toggle事件，在展开时动态设置style.clipPath = 'circle(0 at 50% 0)'→ 强制重排 → 再设为'circle(300px at 50% 0)' - 收起时反向：先设大半径，重排，再设回
circle(0)，否则会跳变 - Safari 中
clip-path过渡仍不稳定，建议 fallback 到scale+overflow: hidden - 不要移除
summary的默认焦点样式（如outline），否则键盘用户无法感知当前焦点 - 避免在
details[open]中直接用display: none切换内容——这会让屏幕阅读器跳过内容；应始终保留在 DOM 中，仅靠opacity和visibility控制可见性 -
transform: scale()动画比height更高效，但若内容含大量图片或 SVG，首次渲染可能卡顿；建议加will-change: transform提前提示合成层 - 移动端点击区域要够大（至少 44×44px），
summary默认太小，需显式设min-height和padding
clip-path 圆形裁切 + 过渡更接近“真实圆圈展开”
如果想让内容真正从一个点向外扩散成圆，clip-path: circle(0 at 50% 0) 是更贴切的选择。但注意：clip-path 的过渡需要目标值明确，不能从 circle(0) 直接到 circle(200px)（浏览器不支持插值），得用 JS 动态写入或预设多个尺寸断点：
容易忽略的可访问性与性能陷阱
圆圈展开本质是装饰性动效，不能牺牲语义或交互可靠性：
