用 transform: scale() 替代 background-size 实现 hover 缩放可避免闪烁，因 transform 仅触发合成不重排；需设 transform-origin: center、overflow: hidden、transition 在常态声明，并注意高 DPI 和兼容性处理。
hover 时背景图缩放会闪烁或跳变？用 transform 替代 background-size
直接改 background-size 触发重排，尤其在高 DPI 屏或 Safari 下极易闪屏。正确做法是固定背景图尺寸，用 transform: scale() 动画缩放容器本身，让背景图随容器“视觉缩放”——浏览器只做合成，不重绘。
实操建议：
- 给卡片元素设
background-image并固定background-size: cover和background-position: center - 卡片本身设
overflow: hidden，防止缩放后边缘溢出 - hover 时对卡片加
transform: scale(1.05)（别用scaleX/scaleY单独缩放） - 务必加
transition: transform 0.3s ease，且写在非 hover 状态下（避免首次悬停无动画）
为什么 transform 缩放比 background-size 更稳？
background-size 改变会触发 layout + paint，而 transform 属于合成层属性，只要元素已提升为独立图层（可通过 will-change: transform 或 transform: translateZ(0) 强制），GPU 就能直接处理缩放帧，帧率更稳、无撕裂。
注意点：
立即学习“前端免费学习笔记（深入）”；
- 不要在 hover 中加
will-change，它应在常态下声明（如will-change: transform写在默认样式里） - 如果卡片内有文字或图标，缩放后可能模糊——这是正常现象，因像素被拉伸；可加
image-rendering: -webkit-optimize-contrast稍微缓解 - 移动端需额外加
@media (hover: hover)包裹 hover 规则，避免误触激活
卡片布局中缩放中心偏移？用 transform-origin 调整锚点
默认缩放以元素左上角为原点，卡片常需以中心缩放。直接加 transform-origin: center 即可，但要注意：若卡片宽高不固定（比如用 fit-content），center 可能计算不准，此时应显式写成 transform-origin: 50% 50%。
常见陷阱：
- 父容器用了
perspective，子元素transform-origin会受其影响，优先检查父级是否意外添加了 3D 相关属性 - 使用 Flex/Grid 布局时，
transform-origin仍以自身盒模型为基准，与 flex 对齐方式无关 - 若卡片有圆角（
border-radius），缩放后圆角半径也会被放大，需同步用border-radius: calc(8px / 1.05)补偿（但通常视觉差异小，可忽略）
IE11 或旧版 Edge 不支持？降级方案要明确
IE11 支持 transform 但不支持 transform-origin: center 的关键字写法，必须写成 transform-origin: 50% 50%。另外，IE 对 transition 的 transform 支持较弱，建议把时间控制在 0.2s 以内，避免卡顿。
兼容性兜底建议：
- 不为 IE 提供缩放效果，仅保留基础 hover 色彩变化（用
@supports not (transform: scale(1))隔离） - 避免在
:hover中同时修改background-size和transform，IE 会取第一个生效的规则，行为不可控 - 真要支持 IE，可用 JS 监听
mouseenter动态加 class，再用滤镜模拟缩放（不推荐，性能差）
真正难的是缩放时保持图片清晰度和边缘裁剪一致性——这取决于原始图分辨率、容器宽高比、以及是否启用 subpixel 渲染。实际项目中，先定死卡片宽高比（如 aspect-ratio: 4/3），再选至少 2x 分辨率的图，比调任何 CSS 参数都管用。
