hover时用transform: translatey(-8px)上浮比top更可靠，仅触发重绘、无需定位上下文，需配transition和overflow:hidden防重叠，safari需加-webkit前缀。
hover 时用 transform: translateY 上浮比 top 更可靠
直接改 top 会触发重排，且需要提前设 position: relative，容易和父容器定位冲突。用 transform: translateY(-8px) 只触发重绘，性能更好，也不依赖定位上下文。
- 上浮距离建议控制在
-4px到-12px之间，-8px是较自然的视觉反馈值 - 必须搭配
transition，否则动画会突兀；推荐写全属性：transition: transform 0.2s ease, box-shadow 0.2s ease - 如果卡片本身有
margin-bottom，上浮后可能和下一张卡片重叠——此时应给父容器加overflow: hidden或改用padding-bottom预留空间
box-shadow 的参数顺序和模糊半径很关键
box-shadow 四个值的顺序是：offset-x offset-y blur-radius spread-radius。悬停投影要“浮起来”的感觉，核心是 offset-y 设为正值（向下偏移），再配合较小的 blur-radius（如 12px）避免发虚。
- 常用组合：
box-shadow: 0 8px 12px -4px rgba(0, 0, 0, 0.12)—— 负的spread-radius能收紧阴影边缘，更显立体 - 别漏掉
rgba的透明度，0.12～0.16是兼顾清晰度与柔和感的安全值 - 如果卡片背景是白色但页面底色偏深，投影颜色别用纯黑，改用
rgba(0, 0, 0, 0.08)更协调
需要兼容 Safari 时记得加 -webkit-transform
Safari 旧版本（特别是 iOS 15 之前）对 transform 的硬件加速支持不稳定，单独写 transform 可能导致 hover 动画卡顿或失效。
- 必须同时声明：
-webkit-transform: translateY(-8px); transform: translateY(-8px); - 对应的 transition 也要补全：
-webkit-transition: -webkit-transform 0.2s ease, box-shadow 0.2s ease; - 现代项目若已放弃 iOS 14 以下支持，可省略前缀，但上线前务必在真机 Safari 测一次 hover 响应是否顺滑
卡片内容溢出时，上浮可能暴露隐藏部分
如果卡片内部有 overflow: hidden 但子元素用了 position: absolute 或负 margin，transform 上浮会把那些“藏起来”的区域带出来，造成视觉破绽。
- 检查卡片根元素是否设置了
overflow: hidden—— 这是防止上浮时内容外露最直接的手段 - 避免在悬停态里动态修改
height或padding，这会干扰 transform 的渲染边界 - 如果卡片内有下拉菜单或 Tooltip，它们的
z-index必须高于卡片自身，否则上浮后会被盖住
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
