本质是低分辨率下浏览器圆角像素化渲染导致抗锯齿不足；解决需视网膜屏适配、高DPI单位微调、GPU加速（如transform: translateZ(0)）及背景隔离等综合优化。
当使用 border-radius 时出现背景边缘“锯齿感”或“不圆滑”，本质是浏览器在低分辨率下对圆角做像素化渲染导致的抗锯齿不足，并非 CSS 写法错误。解决核心在于提升视觉平滑度，而非单纯调大数值。
用视网膜屏适配 + 高DPI单位微调边角
在高像素密度设备（如 Retina 屏）上，1px 实际对应多个物理像素，此时用 px 定义小圆角（如 border-radius: 2px）容易因采样不足而生硬。建议：
- 对关键 UI 元素（如按钮、头像）使用相对单位，例如
border-radius: 0.125rem（对应 2px 在 16px 基准下），更利于缩放和 DPI 适配 - 配合媒体查询为高 DPR 设备单独增强：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {<br> .smooth-btn { border-radius: 2.5px; }<br>}
触发 GPU 加速 + 强制重绘优化渲染路径
部分浏览器（尤其旧版 Chrome/Safari）对 border-radius 的抗锯齿依赖合成层。可主动触发硬件加速提升边缘质量：
- 添加轻量级 will-change：
will-change: transform;（仅对动态圆角元素） - 或启用合成层（更稳妥）：
transform: translateZ(0);或opacity: 0.999; - 避免同时设置
box-shadow和大圆角——阴影会干扰圆角边缘的抗锯齿计算，可改用filter: drop-shadow()替代
背景色与父容器隔离，防止边缘透底
所谓“不圆滑”，有时是圆角内侧背景未完全覆盖，露出父级颜色（尤其是透明/渐变背景）。这不是锯齿，而是裁剪问题：
立即学习“前端免费学习笔记（深入）”；
- 确保元素有明确背景（哪怕
background-color: #fff;），不要依赖父级透出 - 若用
background-image或渐变，加上background-clip: padding-box;（默认值，但显式声明可避免某些渲染异常） - 避免
overflow: hidden与border-radius同时作用于含子元素的容器——子元素可能溢出并破坏圆角视觉完整性
基本上就这些。真正影响圆角顺滑度的，不是“加多大 radius”，而是渲染上下文是否清晰、设备适配是否到位、合成策略是否合理。试一试加个 transform: translateZ(0)，往往比调半像素更见效。
