实现动态阴影需协同offset、blur、spread和transform四参数，配合深色模式适配与移动端:active反馈，才能达到自然上浮效果。
hover 时用 box-shadow 实现动态阴影的关键参数
直接改 box-shadow 的 blur-radius 和 spread-radius 就能产生“变厚、变深”的动态感，但很多人只调 blur-radius，结果阴影发虚没力度。真正有层次的悬浮阴影需要三者协同：offset-x/offset-y 微调位置（模拟轻微上浮），blur-radius 控制柔和度，spread-radius 控制整体尺寸膨胀——这三者同时过渡，视觉才自然。
推荐起始值：box-shadow: 0 2px 4px -2px rgba(0,0,0,0.1)；悬停时变为：box-shadow: 0 8px 16px -4px rgba(0,0,0,0.2)。注意负的 spread-radius 能抑制阴影过度扩散，避免卡片“被撑大”。
transition 必须限定作用属性，否则触发重排
写成 transition: all 0.3s ease 看似省事，但会监听所有可动画属性（比如 width、height、background-color），一旦父容器或 JS 修改了其他样式，就会意外触发阴影动画，卡顿且不可控。
只过渡阴影和位移更安全：
立即学习“前端免费学习笔记（深入）”；
.card {
transition: box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.card:hover {
box-shadow: 0 8px 16px -4px rgba(0,0,0,0.2);
transform: translateY(-2px);
}
-
transform配合translateY比单纯靠box-shadow更符合“上浮”直觉 -
cubic-bezier(0.25, 0.46, 0.45, 0.94)比ease更轻快，避免拖沓 - 不要对
filter: drop-shadow()做过渡——它不支持硬件加速，移动端易掉帧
深色模式下阴影颜色必须响应式适配
用固定 rgba(0,0,0,0.2) 在深色背景上会发灰甚至看不见。别硬编码颜色，改用 color-mix() 或系统色值：
.card {
--shadow-color: color-mix(in srgb, black 20%, transparent);
}
@media (prefers-color-scheme: dark) {
.card {
--shadow-color: color-mix(in srgb, white 15%, transparent);
}
}
.card:hover {
box-shadow: 0 8px 16px -4px var(--shadow-color);
}
-
color-mix()兼容 Chrome 111+ / Safari 16.4+，比hsl()插值更直观 - 如果需兼容老浏览器，用
@media (prefers-color-scheme: dark)切换整套box-shadow值 - 避免用
opacity控制阴影透明度——它会连卡片内容一起变淡
移动端点击反馈要补 touch-action 和伪类
iOS Safari 默认禁用 :hover，纯 CSS 悬浮在触摸设备上基本失效。得靠 :active 补交互反馈，同时防止误触发滚动：
.card {
touch-action: manipulation;
}
.card:active {
transform: translateY(0) scale(0.98);
box-shadow: 0 4px 8px -2px rgba(0,0,0,0.15);
}
-
touch-action: manipulation让浏览器知道这个区域只做点击/缩放，提升响应速度 -
:active状态要压低一点（scale(0.98)）并收窄阴影，模拟按压感 - 别依赖
ontouchstartJS 来切 class——增加维护成本，且可能和手势冲突
:active 状态的物理反馈缺失——这两处不处理，效果再炫也显得假。 
