卡片hover浮起阴影变形因transform与box-shadow未协同过渡，需统一transition、避免overflow:hidden裁切阴影、提升阴影层级；文字模糊由字体渲染降级导致，应启用硬件加速；移动端需用@media和touch事件替代:hover；性能抖动须收敛hover至容器并用transform替代margin。
hover 时卡片浮起但阴影变形不自然
根本原因是 transform: translateY() 和 box-shadow 没有协同过渡，尤其当卡片有圆角或父容器溢出隐藏时，阴影会被裁切。浏览器对 transform 的渲染优先级高于 box-shadow，导致浮起瞬间阴影“跳变”。
- 统一用
transition控制transform和box-shadow，例如：transition: transform 0.3s ease, box-shadow 0.3s ease; - 避免在卡片上设
overflow: hidden，否则浮起后阴影被截断；如必须裁切内容，请把overflow: hidden上移到父容器，并给父容器加transform: translateZ(0)触发独立图层 - 阴影层级要够：
box-shadow: 0 8px 24px rgba(0,0,0,0.12)比0 4px 12px更耐浮起幅度变化
CSS 卡片组 hover 浮起后文字模糊或锯齿
这是 Chrome/Edge 在启用 transform 后对子元素字体渲染降级的典型表现，尤其出现在非整数缩放（如 110% 系统缩放）或使用 subpixel 字体抗锯齿的系统上。
- 强制开启硬件加速：给卡片加
transform: translateZ(0)或will-change: transform（仅 hover 前加，避免常驻开销） - 避免用
font-smoothing: antialiased—— 它在浮起时反而加剧模糊；保留默认或改用-webkit-font-smoothing: subpixel-antialiased - 如果用了
backface-visibility: hidden，确认它没和perspective冲突，否则可能触发额外合成层并干扰文本绘制
移动端 hover 效果失效或误触发
移动设备没有持续 hover 状态，:hover 仅在点击后短暂触发（且部分安卓 WebView 完全忽略），直接套用桌面写法会导致交互断裂。
- 不要依赖纯 CSS
:hover实现核心功能；用@media (hover: hover) and (pointer: fine)包裹桌面专属样式 - 移动端改用
:active+ JS 监听touchstart/touchend模拟“按下浮起”，注意加{ passive: false }防止滚动冲突 - 测试真机时留意 iOS Safari 的 300ms 延迟：若卡片是链接，需加
cursor: pointer或touch-action: manipulation激活快速点击
卡片组中多个元素同时 hover 导致性能抖动
常见于卡片内含图片、SVG 或复杂伪元素时，每个 :hover 触发重排重绘，叠加后帧率骤降，尤其在低端 Android 设备上明显卡顿。
立即学习“前端免费学习笔记（深入）”；
- 把浮起逻辑收敛到最外层卡片容器，避免在
.card__title、.card__img等子元素上单独写:hover - 用
transform: translateY(-4px)而非margin-top: -4px—— 前者只触发合成，后者会触发布局计算 - 如果卡片带背景渐变或 filter（如
blur()），hover 时禁用它们，或用will-change: transform提前声明变更意图
6px 却只配 box-shadow: 0 2px 6px，人眼会感觉“飘得不够稳”。这个分寸没法靠公式算，得在真机上反复调。 
