卡片hover缩放应使用transform: scale()而非width/height，因其走GPU加速合成层、不触发重排重绘，保持文字亚像素渲染精度；需配合transform-origin、backface-visibility: hidden等确保图层稳定。
卡片 hover 时用 width 或 height 变化触发缩放，会导致浏览器重排（reflow）+ 重绘（repaint），文字渲染质量下降、边缘发虚，尤其在高清屏上更明显。根本解法是改用 transform: scale() —— 它走 GPU 加速合成层，不触发布局，文字保持亚像素渲染精度。
为什么 transform 不模糊
transform 属于 CSS 合成属性，浏览器会将其元素提升为独立图层，缩放过程由 GPU 直接处理，原始字体轮廓不被拉伸或插值重采样；而修改 width/height 会强制浏览器重新计算盒模型、重排文档流，再重绘文本，此时字体引擎可能降级为低精度栅格化，造成模糊。
正确写法：只用 transform 实现缩放
确保 hover 效果完全基于 transform，避免混用尺寸变更：
- 移除所有
width、height、padding、margin的 hover 变化 - 统一用
transform: scale(1.05)控制缩放，配合transform-origin控制缩放中心（如center） - 添加
will-change: transform（可选）提前提示浏览器优化，但勿滥用 - 启用硬件加速：加
transform: translateZ(0)或backface-visibility: hidden可进一步稳定图层
完整示例代码
以下是一个清晰、无模糊的卡片缩放写法：
立即学习“前端免费学习笔记（深入）”；
.card {
transition: transform 0.3s ease;
transform-origin: center;
/* 可选：启用硬件加速 */
backface-visibility: hidden;
}
<p>.card:hover {
transform: scale(1.05);
}如果需轻微上浮+缩放，可组合：transform: scale(1.05) translateY(-4px);
额外优化建议
即使用了 transform，仍可能因设备缩放、字体抗锯齿设置或父容器 overflow 裁剪导致视觉模糊：
- 检查父容器是否设置了
overflow: hidden且缩放后卡片边缘被裁切——这会触发子像素裁剪，建议扩大容器留白或设overflow: visible - 避免在缩放同时改变
font-size，那会再次触发重排和字体重渲染 - Chrome 中可尝试开启
font-smoothing: antialiased或-webkit-font-smoothing: subpixel-antialiased（仅限 macOS）提升文字清晰度 - 确保图片/图标也使用
transform缩放，而非width/height
不复杂但容易忽略。核心就一条：hover 动效交给 transform，把布局和渲染彻底分开。
