details标签默认无阴影，需手动添加box-shadow；应作用于details自身而非summary，配合border-radius和overflow: hidden，并用details[open]微调展开态阴影强度。
details 标签默认没阴影，必须手动加 box-shadow
原生 details 元素本身不带任何阴影，视觉上就是个平平无奇的块级容器。要做出“立体感”，得给它套一层 box-shadow，而不是依赖浏览器默认样式。直接写在 details 选择器上最稳妥，避免被后代元素干扰。
常见错误是只给 summary 加阴影——这会让标题浮起来，但内容区域还是贴着页面，整体失去“面板”感。真正要立体的是整个折叠容器，也就是 details 自身。
-
details设置box-shadow: 0 2px 8px rgba(0,0,0,0.1)是起步值，足够区分层级又不突兀 - 加
border-radius: 6px配合阴影，能强化“卡片”轮廓，比直角更显立体 - 别忘了设
overflow: hidden，否则阴影可能被子元素（比如summary的伪元素）意外裁掉 - 若内容展开后高度变化大，阴影位置不会自动调整——这是正常行为，
box-shadow绑定的是元素盒模型，不是内容流
用 details[open] 微调展开态阴影强度
用户感知“立体”的关键之一，是状态变化带来视觉反馈。展开时让阴影略重一点，能暗示“内容已抬升”，比静态阴影更有交互感。
直接用属性选择器 details[open] 即可区分状态，无需 JS 干预。注意：不要用 opacity 或 transform 去“模拟”抬升，那会破坏可访问性焦点逻辑，且和原生 details 的语义冲突。
details { box-shadow: 0 2px 6px rgba(0,0,0,0.08); }details[open] { box-shadow: 0 4px 12px rgba(0,0,0,0.12); }- 过渡用
transition: box-shadow 0.2s ease，别加height或max-height过渡——原生details不触发重排，硬加反而卡顿 - 阴影参数中垂直偏移（第二个值）加大一点，比单纯增强模糊半径更能营造“抬升”错觉
内阴影 + 外阴影组合增强立体层次
单层外阴影容易显得“漂”在页面上，加一层内阴影（inset）能制造“嵌入感”，让折叠面板像真实物理卡片一样有厚度。
但要注意顺序和颜色：内阴影用浅灰或透明度更高的黑，避免压过外阴影；外阴影保持主视觉引导。两者叠加时，浏览器按书写顺序渲染，所以 inset 写前面更可控。
box-shadow: inset 0 1px 2px rgba(255,255,255,0.6), 0 3px 10px rgba(0,0,0,0.12);-
inset部分模拟顶部高光，提升“卡片”质感；外阴影负责整体悬浮感 - 慎用多重外阴影（如三层
box-shadow），在低性能设备上可能引发渲染抖动，尤其配合[open]状态切换时 - 深色模式下，
rgba(255,255,255,0.6)可能失效，建议用hsl(0,0%,100%,0.6)或媒体查询单独处理
阴影与折叠动画共存时的兼容陷阱
原生 details 的展开/收起是即时切换，没有内置动画。想加平滑过渡，只能靠 max-height + overflow 模拟——但这和 box-shadow 本身无关，却会互相影响表现。
最大坑点：当 max-height 从 0 过渡到某个固定值时，如果 details 的 box-shadow 也跟着变，会出现“阴影先动、内容后出”或“内容挤出阴影”的撕裂感。
- 解决方案：阴影过渡独立于内容动画，只响应
[open]属性，不绑定max-height - 若坚持用
max-height动画，把box-shadow的transition时间设为比max-height略短（如 0.15s vs 0.25s），视觉上更同步 - Safari 旧版本（≤15.4）对
box-shadow+max-height同时过渡支持不稳定，建议降级为纯[open]状态切换阴影，放弃内容区动画 - 阴影颜色别用
transparent做起点，某些浏览器会跳过过渡，直接闪现最终色
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
