hover放大卡顿或闪跳是因未声明transition，须在常态规则中添加transition: transform 0.3s ease；模糊源于非整数缩放插值，错位因transform创建新层叠上下文。
hover 放大卡顿或闪跳，是因为没加 transition
直接写 transform: scale(1.2) 在 :hover 里，浏览器默认没有过渡效果，会立刻跳变。必须显式声明 transition 才能平滑变化。
-
transition要写在「常态」（非 hover）的规则里，不是只写在:hover中 - 推荐只过渡
transform，避免触发布局重排（width/height）或重绘（background-color） - 常用写法：
transition: transform 0.3s ease;—— 0.3 秒、缓动曲线，比linear更自然
scale 放大后图片边缘模糊，是像素对齐问题
放大时浏览器用插值算法渲染，尤其在非整数缩放（如 scale(1.15)）或高 DPI 屏幕下容易发虚。这不是 bug，但可缓解：
- 优先用整数倍缩放（
scale(1.2)比scale(1.17)更稳） - 加
will-change: transform;提前提示浏览器优化渲染层（仅对频繁动画的元素） - 避免父容器有
overflow: hidden且子图带圆角——border-radius和scale叠加易出锯齿
hover 放大后文字/其他元素错位，是 transform 的层叠上下文影响
transform 会创建新的层叠上下文（stacking context），可能让 z-index 行为异常，或导致相邻元素被“推开”（尤其 inline 元素）：
- 确保图片是
display: block或display: inline-block，避免 inline 默认的基线对齐干扰 - 如果父容器是 flex/grid，放大后溢出，加
overflow: hidden限制裁剪范围 - 不要对
img直接设z-index（无效），需要提升层级时，给其包装一层<div>并设position: relative+z-index
img {
display: block;
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: transform;
}
img:hover {
transform: scale(1.2);
}
实际中，cubic-bezier 曲线比 ease 更可控；模糊和错位问题往往不是代码写错，而是没意识到 transform 自带的渲染机制和上下文副作用。 
