AI 摘要：回顾了 <details> 与 <summary> 元素自 2018 年以来的演进，重点介绍了新引入的 ::details-content 伪元素，使得内容展开收起可实现平滑动画；同时讲解了内容锚点（hash）自动展开机制，以及 scroll-margin-block-start 的可用技巧。

1. HTML <details> 元素的演进
• 从 2018 年起 <details> 结构不断完善，三角箭头改为 ::marker，与列表元素标记统一。
• 新增 name 属性，支持手风琴式（accordion）互斥展开。
• 支持内容区域 hash 匹配自动展开，实现无 JS 的动态交互。
• 引入 ::details-content 伪元素，为内容区域提供 Shadow DOM 层级的样式控制。

2. ::details-content 实现动画展开效果
• 通过 transition 联合 content-visibility、height 等属性实现收展动画。
• 详细解释 allow-discrete 特性，使离散属性如 display 支持过渡动画。
• interpolate-size: allow-keywords 让 auto 尺寸参与动画计算。
• 属于渐进增强（progressive enhancement）方案，浏览器不支持也不会出错。

3. 锚点匹配与自动展开机制
• 当 details 内容的元素被 URL hash 定位时，details 自动展开。
• 该行为与 hidden="until-found" 类似，由 content-visibility 支持。
• 通过样式调整滚动定位：scroll-margin-block-start 设置元素滚动停留位置，提升体验。

4. 浏览器支持与语法参考
• 现代浏览器几乎在同一时间点全面支持 ::details-content。
• 使用语法为 selector::details-content，适用所有常规 CSS 属性。
• 由于支持良好，可放心在生产环境渐进式增强。