根本原因是WebKit内核（Android 4.4–5.1）默认CPU渲染导致亚像素采样精度不足；12.5px、50%、1.5px边框、2px+高DPR、overflow:hidden+大圆角易加剧锯齿；修复需用偶数整数radius、translateZ(0)、outline替代细边框、filter:drop-shadow()、伪元素单独加GPU触发。
border-radius 在低端 Android 机上渲染发虚的根本原因
不是写法错了，是 WebKit 内核（尤其是 Android 4.4–5.1 的系统 WebView）默认走 CPU 渲染路径，对圆角路径做亚像素插值时采样精度不足，直接暴露边缘色阶断层。这种锯齿在静止状态下可能不明显，但一旦触发滚动、hover 或 transform 动画，就会突然加剧——说明图层未稳定分组，合成抖动放大了原本轻微的渲染误差。
哪些 border-radius 值会让锯齿更明显
以下组合在低端机上高频触发视觉断裂：
-
border-radius: 12.5px或border-radius: 50%（非正方形元素下计算出非整数像素） -
border: 1.5px solid #000（非整数边框宽度强制亚像素绘制） -
border-radius: 2px+ 高 DPR 屏（如 2x/3x 屏上 2px 实际对应 4–6 物理像素，采样失衡） -
overflow: hidden与大圆角同时作用于含子元素的容器（裁剪边界与抗锯齿路径错位）
真正起效的修复手段（按实操优先级）
别碰 background-clip 或 -webkit-appearance，它们不解决渲染精度问题。试试这些：
- 统一用偶数整数半径：
border-radius: 12px、16px，禁用小数或百分比 - 加轻量级 GPU 触发：给元素写
transform: translateZ(0)（比will-change: transform兼容性更好） - 若必须用细边框，改用
outline: 1px solid #000（不参与盒模型，浏览器对其圆角边缘处理更稳） - 避免
box-shadow和大圆角共存；可换filter: drop-shadow()替代
最容易被忽略的合成层陷阱
只给父容器加 transform: translateZ(0)，子元素（比如 ::before 伪元素里的渐变背景）依然走 CPU 渲染。必须单独为伪元素设置：
立即学习“前端免费学习笔记（深入）”；
.card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(...);
transform: translateZ(0);
will-change: transform;
}
否则滚动时圆角边缘仍会撕裂或闪白边——这不是设计问题，是合成上下文没切对。
