卡片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 可进一步稳定图层

完整示例代码

以下是一个清晰、无模糊的卡片缩放写法：

macOS Automator Services

部署和使用军舰的 macOS Automator 自动化服务集合。包含 5 个实用工作流：PDF转JPG、PNG重命名并转JPG、图像拼接、解压RAR、顺序命名图像文件。一键安装所有服务到 ~/Library/Services/ 目录。使用场景：(1) "安装我的自动化服务"，(2) "部署所有 Automato...

下载

立即学习“前端免费学习笔记（深入）”；

.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，把布局和渲染彻底分开。