卡片封面hover缩放需用transform: scale(1.05)配合transition: transform 0.3s ease，显式设transform-origin: center，容器加overflow: hidden和固定宽高，移动端用:focus-within兜底，gpu加速用translatez(0)。
卡片封面hover缩放的CSS核心写法
直接用 transform: scale() 配合 transition 就能实现，不需要JS。关键在于缩放原点、过渡时机和是否触发重排。
-
transform: scale(1.05)是最常用的安全值，超过1.1容易让边缘像素模糊（尤其在Retina屏上） - 必须显式设置
transform-origin: center，否则默认从左上角缩放，视觉失真 -
transition: transform 0.3s ease比all 0.3s更高效，避免意外触发动画属性（比如color变化也加过渡）
为什么图片会溢出容器或出现滚动条？
缩放后元素尺寸变大，但父容器没预留空间，导致溢出。常见于 overflow: hidden 缺失或卡片未设固定宽高。
- 给卡片容器加
overflow: hidden，这是最简单有效的裁剪方案 - 确保卡片本身有明确的
width和height（比如aspect-ratio: 4/3或固定像素值），否则缩放后布局可能抖动 - 如果封面是
<img>，别忘了加display: block，否则底部可能多出几像素空白（inline元素的基线对齐问题）
移动端hover失效？用:focus-within兜底
纯 :hover 在触摸设备上基本不触发，iOS Safari 和 Android Chrome 都如此。不能只靠 hover。
- 给卡片容器加
tabindex="0"，再用&:focus-within捕获键盘焦点（适配屏幕阅读器和键盘用户） - 触摸设备上可配合
@media (hover: none) and (pointer: coarse)降级为点击态（比如加:active短暂缩放） - 避免只写
:hover而忽略可访问性，否则键盘 Tab 导航时效果消失
缩放后文字/图标模糊？硬件加速来救
部分浏览器缩放 <img> 或含文字的元素时，会启用低质量插值算法，导致发虚。
- 给缩放元素加
transform: scale(1.05) translateZ(0)或will-change: transform，强制开启GPU加速 - 慎用
will-change：只对真正需要动画的元素加，且最好 hover 时动态添加（用 JS 切 class），避免长期占用 GPU 内存 - 如果是背景图，优先用
background-size: cover+background-position: center，比缩放整个div更稳定
position: absolute 子元素，缩放时它们的定位基准会偏移，这种细节最容易被忽略。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
