box-shadow 和 transform 必须配对过渡，且初始 box-shadow 不能为 none、父容器 overflow 不能 hidden、移动端需用 tabindex 或 js fallback 兼容。
box-shadow 和 transform 必须配对写，否则悬停“跳变”
只改 box-shadow 或只改 transform 都会出问题：前者阴影动但卡片不动，像贴纸浮空；后者卡片上移但阴影没跟上，像脱节。必须两者同时过渡，且用相同持续时间与缓动函数。
-
transition写在默认状态（非:hover），例如：transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); - 别用
transition: all—— 它可能触发无关属性重绘，尤其在旧版 Chrome 中导致box-shadow插值失败 - 初始
box-shadow不能是none，得设一个极小值，比如0 1px 2px rgba(0,0,0,0.05)，否则 Safari 直接跳帧
translateY(-4px) 是起点，但要按卡片高度微调
数值不是固定值，而是视觉锚点问题：太小看不出变化，太大让卡片“飘离网格”。-4px 适合多数 ≤200px 高的卡片，但需结合上下文判断。
- 卡片含大图或头像区域 → 改为
translateY(-6px)，强化浮起感 - 卡片用
border-radius: 12px以上 → 阴影模糊半径建议 ≥20px，否则圆角边缘被切 - 深色背景（如
#1e1e1e）→ 阴影透明度再降0.04–0.06，否则显脏发灰 - 别用
margin-top: -4px替代transform—— 它触发 layout，动画卡顿且破坏 Grid/Flex 对齐
:hover 在手机上根本不会触发，得加 fallback
iOS 和 Android 浏览器默认不响应普通 div 的 :hover，这不是 bug，是省电策略。纯靠 CSS 无法覆盖，必须提前设计兼容路径。
- 最简方案：给卡片加
tabindex="0"，再用&:focus-within模拟悬停（需现代浏览器支持） - 稳妥方案：JS 监听
touchstart（不是click，避免 300ms 延迟），动态加 class，例如.card--hovered - CSS 中统一写：
.card:hover, .card--hovered { ... }，保持样式复用 - 别依赖
will-change: transform—— 它可能引发额外重绘，实测反而更卡
父容器 overflow: hidden 是阴影消失的头号凶手
阴影绘制在元素盒模型之外，一旦父容器设了 overflow: hidden 或 overflow: auto，阴影直接被裁掉——连带 transform: translateY(-4px) 上移部分也一起消失。
- 检查卡片最近的父级容器，删掉或改成
overflow: visible - 若必须限制溢出（比如网格布局），改用
padding留白替代overflow: hidden - 卡片自身设了
position: relative且带z-index？确保其值大于同级其他元素，否则阴影可能被隔壁卡片遮住 - 别用
translateZ(0)强行开启硬件加速——Chrome 115+ 已降级该操作，且无perspective时无效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
