应在外层容器（如.card）添加box-shadow并固定启用，避免直接作用于details；用max-height或opacity+transform实现平滑动画；通过伪元素扩展summary点击热区，同时隐藏原生箭头并自定义图标，确保可访问性不被破坏。
details标签默认样式太简陋，怎么加阴影又不破坏可访问性
直接给 <details> 加 box-shadow 会出问题：展开/收起时阴影位置突变，视觉跳动；更关键的是，部分屏幕阅读器依赖原生 <details> 的语义和焦点行为，强行用 display: none 或 visibility: hidden 替换 <summary> 会切断语义链。
正确做法是只修饰容器外层，保留原生结构：
- 用包裹
<details>的<div class="card">承载阴影和圆角，而非直接作用于<details> -
<summary>只加轻微内边距和背景微调，避免覆盖其默认的「小三角」指示符（该符号由浏览器生成，appearance: none会移除它，需手动补） - 阴影用
box-shadow: 0 2px 8px rgba(0,0,0,0.1)起步，避免过重遮挡内容
summary点击区域太小，如何扩大又不误触折叠
移动端手指点按容易失败，但盲目加 padding 会让小三角偏移或被裁剪。核心矛盾在于：浏览器对 <summary> 的点击热区仅限文字+默认图标区域，无法通过 CSS 直接扩展。
解法是用伪元素模拟可点击层，同时保持语义完整：
立即学习“前端免费学习笔记（深入）”；
- 给
<summary>设置position: relative，再用::after伪元素覆盖整个行高区域：content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; - 必须加
z-index: 1，否则伪元素会盖住文字，且不能设pointer-events: none，否则热区失效 - 如果用了自定义图标（比如 Font Awesome），记得把原生小三角用
list-style: none隐藏，并确保图标在伪元素下方（z-index: 0）
折叠动画卡顿或闪屏，CSS过渡怎么写才顺滑
<details> 本身不支持 height 过渡（因为高度是自动计算的），硬加 transition: height 0.3s 会导致收起时直接消失、展开时从 0 突然撑开。
真正可用的过渡方案只有两个：
- 用
max-height模拟：给<details>[open] > *:not(summary)设max-height: 500px（值需大于内容实际高度），未展开时设max-height: 0，再加overflow: hidden—— 注意 500px 是硬编码上限，超长内容会被截断 - 改用
opacity+transform: scaleY()组合：展开时opacity: 1; transform: scaleY(1)，收起时opacity: 0; transform: scaleY(0.95)，配合transition: opacity 0.25s, transform 0.25s，视觉更轻量，且无高度限制 - 绝对不要对
<details>元素本身加transition，它不触发重排，纯属无效
阴影在折叠态和展开态看起来不一致，怎么统一视觉重量
展开后卡片变高，阴影投射面积增大，人眼会感觉「变重了」；收起时只剩 summary 一行，阴影显得单薄。这不是错觉，而是阴影的物理建模逻辑导致的。
解决方案是固定阴影层级，与内容高度脱钩：
- 把阴影全部交给外层
.card容器承担，且始终启用（不随[open]切换） - 展开时，用
border-bottom: 1px solid rgba(0,0,0,0.05)在内容区底部加一条浅线，模拟阴影加深效果，平衡视觉重量 - 避免在
[open]状态下增强阴影值（如从0 2px 8px改成0 4px 12px），这会强化「状态切换感」，削弱卡片的整体性
立体感来自层次错落，不是阴影强弱。最易被忽略的是：卡片圆角半径必须和阴影模糊值匹配——比如 border-radius: 12px 就配 box-shadow: 0 2px 12px，否则边缘会发虚或割裂。
