如何用CSS解决移动端头像裁剪后边缘锯齿明显的问题？

头像边缘发虚或有白边是因sub-pixel渲染与基线对齐不一致所致。解决需：img设display:block、容器overflow:hidden且宽高相等；图片分辨率≥容器×2；优选background-image+border-radius；加transform:translateZ(0)启用GPU合成；clip-path用整数坐标或SVG。

直接加 border-radius: 50% 不解决锯齿，关键在渲染层控制和尺寸对齐。

为什么头像边缘在iOS/Android上发虚或有白边？

这不是圆角写错了，而是浏览器对 sub-pixel 渲染和基线对齐的处理不一致。常见于：<img> 默认是行内元素，底部留有空白间隙；图片未完全填满容器时，边缘像素被插值拉伸；DPR=2 或 3 的屏幕下，1px 边框或半像素偏移会触发模糊采样。

1. 用 display: block 消除 <img> 的默认基线间隙
2. 容器必须设 overflow: hidden，否则裁剪溢出部分会暴露锯齿
3. 避免 width: 100%; height: auto 配合 border-radius: 50% —— 宽高不等就不是真圆，边缘更易失真
4. 确保图片分辨率 ≥ 容器尺寸 × 2（例如容器 80px，则图至少 160px），否则缩放后插值放大噪点

用 background-image + border-radius 替代 img 标签

绕过 <img> 渲染限制最稳妥的方式：把图片当背景，由容器负责裁剪。这样能避开 object-fit 插值、基线、宽高比错位等所有链路问题。

1. 外层 <div class="avatar"> 设固定宽高（如 80px × 80px）、border-radius: 50%、overflow: hidden
2. 用 background-image 加 background-size: cover 和 background-position: center 控制显示区域
3. 不需要 object-fit 或 object-position，兼容性可下探至 iOS 8
4. 若需支持 srcset 或懒加载，可在 JS 中动态设置 style.backgroundImage

强制 GPU 合成层提升渲染精度

Safari 和部分 Android WebKit 对圆角裁剪的亚像素渲染精度低，加合成层能启用更高色深通道，减少色阶断裂和边缘毛刺。

1. 给容器加 transform: translateZ(0) 或 will-change: transform
2. 二者建议同时使用，单加一个在 iOS 16+ 上可能无效
3. 不要加在 <img> 上，而应加在外层容器（如 .avatar）上
4. 慎用 backface-visibility: hidden，它在某些旧版 Android 上反而引发闪烁

clip-path 多边形头像的锯齿怎么压？

如果不用圆角，而是走 clip-path: polygon() 做六边形或心形头像，锯齿主要来自坐标计算失准和抗锯齿未触发。

1. 禁用小数百分比（如 49.5%），全部用整数（50%、25%）避免四舍五入抖动
2. 优先用 SVG <clipPath> + viewBox，天然等比缩放且抗锯齿稳定
3. 纯 CSS 方案中，必须配合 transform: translateZ(0)，否则 polygon 裁剪在 Safari 下常被降级为 CPU 渲染
4. 别在 clip-path 元素上叠加 filter: blur() 或 opacity，会关闭硬件加速，锯齿翻倍

真正难的不是写出 border-radius: 50%，而是让每个像素都落在渲染管线该在的位置——尺寸、坐标、合成层、DPR，缺一不可。