必须同时控制transform和box-shadow，用transition: transform 0.2s ease, box-shadow 0.2s ease联动过渡，避免仅改其一或使用transition: all； translatey(-4px)配合0 8px 16px rgba(0,0,0,0.12)基础阴影，hover时增强至0 12px 24px rgba(0,0,0,0.16)，父容器需避免overflow: hidden裁剪阴影，移动端须用@media (hover: hover)或:active/focus-within降级。
hover 升起 + 投影需要同时控制 transform 和 box-shadow
只改 box-shadow 或只用 transform: translateY(-4px) 都不够——前者没立体感，后者没景深。必须两者联动，且过渡要统一时长和缓动函数，否则会卡顿或不同步。
- 推荐用
transition: transform 0.2s ease, box-shadow 0.2s ease，避免写成transition: all 0.2s（可能意外触发其他属性动画） -
transform建议用translateY(-4px)而非scale，更符合“升起”直觉；数值别超过-8px，否则卡片容易飘出父容器边界 -
box-shadow推荐组合：0 8px 16px rgba(0,0,0,0.12)（比默认阴影更厚、更柔），hover 时可加到0 12px 24px rgba(0,0,0,0.16)
父容器 overflow: hidden 会裁剪 hover 投影
卡片升起后投影向下延伸，如果父容器（比如 .card-grid）设置了 overflow: hidden，投影会被直接切掉，看起来像“断了一截”。这不是 bug，是渲染规则。
- 临时调试可加
border: 1px solid transparent看父容器实际范围 - 稳妥解法：给父容器留出投影空间，例如
padding-bottom: 12px（对应阴影最大模糊半径） - 若无法改父容器，改卡片自身：用
margin-bottom: 12px替代padding-bottom，确保投影区域在父容器内
移动端 hover 不生效？别依赖 :hover
触摸设备没有“悬停”概念，:hover 在 iOS Safari 和部分安卓浏览器中仅在点击后短暂触发，甚至完全不触发。靠它做交互反馈，等于放弃触屏用户。
- 真要兼容触屏，改用
:active+focus-within组合，例如：&:active, &:focus-within { transform: translateY(-4px); box-shadow: ...; } - 更健壮的做法是加 JS 监听
touchstart/touchend切换 class，比如.card--lifted - 若只是装饰性效果（非关键交互），可在 CSS 中用
@media (hover: hover) and (pointer: fine)包裹 hover 规则，明确限定仅限鼠标设备
阴影发虚或边缘锯齿？检查 backdrop-filter 或缩放
如果卡片本身用了 backdrop-filter: blur(4px)，再叠加大阴影，可能因多重滤镜叠加导致渲染模糊；另外，页面缩放非 100%（如浏览器缩放到 125%）时，CSS 像素对齐失效，阴影边缘易出现灰边或锯齿。
- 避免在同元素上同时用
backdrop-filter和强box-shadow，优先保留后者 - 测试时务必在 100% 缩放下验效果；开发阶段可在 Chrome DevTools 的 Rendering 面板勾选 “Emulate display scaling” 检查缩放兼容性
- 若仍发虚，把
box-shadow的spread-radius设为0，靠blur-radius控制柔和度，减少渲染压力
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
