details卡片展开时阴影不随内容高度变化，因box-shadow不会自动响应高度变化，必须通过JS监听open状态并用data-open属性触发CSS过渡，同步控制y偏移、blur-radius和alpha值。
details卡片展开时阴影不随内容高度变化？
原生details标签的展开/收起是状态切换，不是尺寸动画——box-shadow不会因为内容区高度变化而自动增强或位移。你看到的“阴影没反应”，其实是它根本没被触发变化。必须手动把阴影变化绑定到[open]状态上，而不是依赖内容渲染高度。
常见错误是给details本身加transition: box-shadow却没写details[open]对应的悬停或状态样式，结果过渡完全不生效。
- 只写
.card { transition: box-shadow 0.2s; }没用，必须配合状态选择器 - 别在
summary上设阴影——它只是标题栏，不是卡片主体 - 卡片容器得是
details的父级（比如<div class="card"><details>...</details></div>），否则无法统一控制视觉层级
如何用CSS让details卡片展开时阴影“浮起来”
真正的浮动感来自三组同步变化：y轴偏移、模糊半径增大、阴影透明度微升。不能只调一个参数，否则像贴图突然变深。
推荐写法（直接作用于包裹details的卡片容器）：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
.card {
transition: box-shadow 0.3s ease, transform 0.3s ease;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.card details[open] + & {
/* 注意：这里需要结构匹配，更稳妥的是给卡片加data-open属性，用JS同步 */
}
但纯CSS无法监听details的open状态变化并反向影响父级——所以实际要用轻量JS同步状态：
- 监听
details.toggle事件 - 用
element.closest('.card').dataset.open = details.open写入状态 - CSS写
.card[data-open="true"] { box-shadow: 0 8px 16px rgba(0,0,0,0.15); transform: translateY(-2px); }
为什么details展开后卡片边缘发虚或阴影错位
这不是阴影写错了，而是details内部内容展开时触发了重排（reflow），导致GPU渲染层未及时更新。尤其当卡片含图片、字体未加载完、或用了border-radius时更明显。
- 强制硬件加速：
transform: translateZ(0)或backface-visibility: hidden加在.card上 - 避免在
details[open]里改padding或margin——这些会引发额外重排，干扰阴影渲染节奏 - 如果卡片用了
overflow: hidden，确保内容区max-height动画和阴影过渡时长一致，否则视觉脱节
移动端展开阴影太重怎么降级
PC上看着舒服的0 10px 20px在手机上会压住文字、吃掉点击热区。不能靠媒体查询一刀切隐藏阴影，而要按设备能力渐进调整。
- 小屏下把模糊半径砍掉一半：
@media (max-width: 768px) { .card[data-open="true"] { box-shadow: 0 4px 12px rgba(0,0,0,0.12); } } - 禁用
transform: translateY(-2px)——移动端手指操作不需要“抬升”错觉，反而影响点击精度 - 如果卡片内有图片，
scrollHeight读取不准会导致max-height动画卡顿，进而让阴影过渡不同步；此时建议 fallback 到固定高度预估（如max-height: 240px）
细节在于：阴影不是孤立效果，它必须和max-height动画、transform位移、甚至字体加载时机对齐。差一帧，用户就感觉“卡”或“假”。
