结论是：transform: scale() + box-shadow + transition 三者组合才能实现自然、轻量、兼容性好的悬浮上浮效果；单用 box-shadow 缺乏位移感，无法传达“上浮”视觉反馈，易误判可点击性，且在移动端易失效。
直接给结论：用 transform: scale() + box-shadow + transition 三者组合，就能做出自然、轻量、兼容性好的悬浮上浮阴影效果，不需要 JS 或第三方库。
为什么不能只加 box-shadow？
单纯增大阴影值（比如从 shadow-sm 改成 shadow-xl）会让卡片“沉”得更重，缺乏“上浮”的视觉暗示。用户感知不到交互反馈的层次变化，容易误判可点击性。真正有效的悬浮效果必须包含位移感（z 轴上升）+ 深度感（阴影扩散）+ 过渡感（不突兀）。
常见错误现象包括：
- 阴影突然变大，无缓动，像“啪”一下弹出来
- 只改
transform: translateY(-2px)，但没配阴影，看起来像被顶起但没脱离背景 - 在移动端完全失效，因为部分安卓 WebView 对
transform+hover的触发不一致
transform: scale(1.02) 比 translateY() 更适合商品卡片
电商卡片通常有圆角、图片、文字等复合内容，scale() 能让整个卡片轻微放大，同时带动阴影自然扩张，视觉上更“立体”。而 translateY() 只是平移，容易让卡片边缘和父容器产生错位感，尤其在网格布局中会破坏对齐。
实操建议：
- 缩放值控制在
1.01～1.05之间，1.02是多数项目的平衡点 - 务必搭配
transform-origin: center，避免图片或文字边缘被拉伸变形 - 如果卡片内含绝对定位元素（如角标、折扣标签），需检查它们是否随缩放正确重绘
阴影参数怎么配才不“脏”？
阴影不是越深越好。box-shadow: 0 4px 12px rgba(0,0,0,0.1) 这类通用值在白色背景上可能显得发灰，在深色主题下又不够显眼。关键看三个参数：偏移量（y）、模糊半径、透明度。
立即学习“前端免费学习笔记（深入）”；
推荐组合（适配主流浅色背景）：
- 基础悬浮：
box-shadow: 0 6px 16px -4px rgba(0,0,0,0.12)—— 负的 spread 值收束阴影边缘，更干净 - 强调层级：
box-shadow: 0 8px 24px -6px rgba(0,0,0,0.16)—— 适合主推商品卡片 - 暗色模式适配：把
rgba(0,0,0,0.12)换成rgba(255,255,255,0.08)，并配合@media (prefers-color-scheme: dark)
移动端和无障碍怎么兜底？
手机端没有 hover，但用户第一次触摸时仍应有反馈。别依赖纯 :hover，补上 :focus-within 和 :active：
.product-card {
transition: transform 200ms ease, box-shadow 200ms ease;
}
.product-card:hover,
.product-card:focus-within,
.product-card:active {
transform: scale(1.02);
box-shadow: 0 6px 16px -4px rgba(0,0,0,0.12);
}
注意两个细节：
-
tabindex="0"要加在卡片容器上，否则:focus-within在键盘导航时无法触发 - 某些 iOS Safari 版本对
:active有 300ms 延迟，可在<head>加<meta name="viewport" content="width=device-width, user-scalable=no">缓解
最常被忽略的是性能：不要在大量卡片上同时启用 will-change: transform，它会强制 GPU 提前创建图层，反而拖慢滚动。只在明确需要高频悬停反馈的区域（比如首页轮播下方的热卖区）谨慎开启。
