只加一层阴影不行，因y偏移突变导致采样错位；真正上浮需同步减offset-y、增blur-radius、降alpha值；须加transform过渡和硬件加速；移动端需用button或JS模拟；阴影色要匹配背景光。
box-shadow 悬停上浮为什么只加一层阴影不行
直接写 box-shadow: 0 4px 12px rgba(0,0,0,0.15) 然后 hover 时加大 y 偏移，看起来是“上浮”了，但阴影边缘会突然变重、发虚，甚至在高 DPI 屏幕上出现模糊抖动。这是因为浏览器对阴影的渲染依赖于像素采样，y 偏移突变 + 模糊半径不变，会让阴影底层采样区域错位。
真正自然的上浮，是模拟物体被抬离平面后，阴影变淡、变大、边缘更柔和——这需要同时调节三个参数：
-
offset-y：往上收（比如从4px→2px），让卡片“离地” -
blur-radius：加大（比如12px→20px），模拟阴影扩散 -
color的 alpha 值：降低（比如rgba(0,0,0,0.15)→rgba(0,0,0,0.08)），模拟距离增加后光衰减
transition 写在哪？为什么不能只过渡 box-shadow
只给 box-shadow 加 transition，悬停瞬间仍会卡顿，尤其在低端设备或复杂布局里。因为浏览器发现只有阴影变化，可能跳过图层合成优化，反复重绘整个卡片区域。
必须显式触发硬件加速，并把过渡锚定到最轻量的属性上：
立即学习“前端免费学习笔记（深入）”；
- 在卡片元素上加
transform: translateZ(0)或will-change: transform，强制创建独立合成层 -
transition应该写成transition: box-shadow 0.25s ease, transform 0.25s ease—— 即便没用transform动画，也得列出来，否则浏览器无法预判动画路径 - 千万别写
transition: all 0.25s，它会拖慢首次悬停响应，且在 Safari 下容易引发 layout thrashing
移动端点击无反馈？hover 在触摸设备上根本不会触发
CSS :hover 在 iOS 和 Android 大部分浏览器里，仅对可聚焦元素（如 <a></a>、<button></button>）或开启了 touch-action: manipulation 的元素生效，且首次点击后才激活 hover 状态。纯 <div> 卡片在手机上点十次也不上浮。
<p>可靠解法只有两个，选其一：</p>
<ul>
<li>把卡片改成 <code><button type="button"></button>，并加 cursor: pointer 和 outline: none（记得保留键盘可访问性）
touchstart / pointerdown，动态加 class（比如 .is-hovered），再用 CSS 控制该 class 下的阴影变化阴影颜色怎么选才不显脏
用 rgba(0,0,0,0.2) 是新手最常踩的坑：在浅色背景上发灰，在深色背景上又吃不进底色，整张卡片像蒙了层雾。关键不是调透明度，而是匹配环境光。
实操建议：
- 如果卡片背景是
#fff，阴影用rgba(0,0,0,0.06)+blur: 16px，比0.15更通透 - 如果卡片有轻微背景色（如
#f9fafb），阴影改用rgba(0,0,0,0.04)，否则对比太生硬 - 深色模式下，绝对不要复用黑色阴影——换成
rgba(255,255,255,0.08)，并把offset-y改为负值（比如-1px），模拟顶光
上浮效果是否自然，80% 取决于阴影是否“消失在背景里”，而不是“跳出来”。调完记得在真机上横竖屏各看三次，眼睛比 DevTools 更准。
