缩放后元素模糊的本质是浏览器将元素渲染到非整数像素位置导致亚像素抗锯齿，核心解法是用transform: scale()替代width/height缩放，配合will-change: transform或translateZ(0)开启硬件加速，并通过calc()控制基准尺寸、image-rendering优化图片渲染。
缩放后元素模糊，本质是浏览器将元素渲染到非整数像素位置，导致亚像素抗锯齿，视觉上发虚。核心解法是让缩放后的尺寸和位置尽量落在整数像素上，同时配合渲染优化策略。
用transform: scale()替代width/height缩放
CSS的width、height缩放会改变盒模型尺寸，容易触发重排，且缩放后坐标常为小数。transform基于GPU加速，不触发重排，且现代浏览器对transform缩放做了更多亚像素优化。
- ✅ 正确写法：transform: scale(1.5);
- ❌ 避免写法：width: 150%; height: 150%;
- 注意：scale()以元素中心为原点，如需左上对齐，可加transform-origin: top left;
强制对齐整数像素：translateZ(0)或will-change
开启硬件加速能促使浏览器使用独立图层，减少亚像素混合。will-change更精准，但需谨慎使用。
- 对频繁缩放的元素（如图标、卡片），加：will-change: transform;
- 若兼容性要求高，可用transform: translateZ(0);作为轻量替代
- ⚠️ 注意：不要全局滥用will-change，仅加在真正会变化的元素上，否则可能增加内存开销
结合calc()与视口单位控制基准尺寸
让原始尺寸本身接近整数，缩放后更易落整。例如在100%缩放下就用偶数宽高，再用scale微调。
立即学习“前端免费学习笔记（深入）”；
- 比如设计稿是375px宽，避免设width: 375px;，改用width: calc(100vw / 3.75);再配合scale(1.02)，比直接width: 382.5px更稳
- 对于图标类小元素，优先用inline-block + font-size控制大小，再用transform微调，比直接设width/height更像素友好
必要时启用image-rendering优化图片缩放
如果模糊来自img或背景图，需单独处理：
- image-rendering: -webkit-optimize-contrast;（Safari）
- image-rendering: crisp-edges;（适合线条图、图标）
- image-rendering: pixelated;（适合像素风，放大不失真）
基本上就这些。关键不是“禁用缩放”，而是让缩放行为更可控——用transform打底，用will-change提效，用基准尺寸兜底，再按需微调图片渲染。不复杂但容易忽略细节。
