根本原因是浏览器对带边框的圆角路径进行抗锯齿时，在亚像素渲染和图层合成阶段丢失精度，尤其当border宽度或border-radius含小数时更明显。
border-radius + border 为什么会出现锯齿？
根本原因不是 border-radius 本身，而是浏览器对「带边框的圆角路径」做抗锯齿时，在亚像素渲染和图层合成阶段丢失精度。尤其当 border 是非整数宽度（比如 1.5px）或 border-radius 值含小数（如 12.3px）时，渲染引擎无法对齐像素网格，边缘采样失真直接暴露为白边、毛边或闪烁锯齿。
哪些 border 设置会让锯齿更明显？
以下组合实际开发中高频触发锯齿：
-
border: 1.5px solid #000—— 非整数边框宽度强制亚像素绘制 -
border-radius: 14.7px—— 小数半径导致圆弧路径无法映射到整数像素 -
border: 2px solid transparent+background-clip: padding-box—— 透明边框不参与抗锯齿计算，但占据空间，加剧背景与边框交界处的混色断裂 - 在 Retina 屏上未配
image-rendering: -webkit-optimize-contrast的 PNG 背景图叠加圆角边框
真正有效的修复手段（按实操优先级）
别碰 background-clip，它解决的是覆盖关系，不是锯齿。试试这些：
- 把
border宽度设为偶数整数：border: 2px solid #333或4px，避开 1px/3px 这类易抖动值 - 统一用整数
border-radius：比如12px、16px、20px，禁用12.5px或百分比（50%在非正方形元素上会生成非整数像素值） - 加硬件加速触发：给元素写
transform: translateZ(0)或will-change: transform，让圆角路径走 GPU 光栅化管线 - 若必须用细边框，改用
outline替代：outline: 1px solid #000，它不参与盒模型，且多数浏览器对其圆角边缘处理更稳
什么时候该放弃 border，换别的方案？
当设计要求「1px 精细边框 + 大圆角（如 24px）」且必须兼容旧版 Safari 时，border 锯齿几乎无解。这时建议：
- 用两层元素模拟：外层
border-radius: 24px+overflow: hidden，内层用box-shadow: 0 0 0 1px #000模拟边框 - 改用 SVG 边框：把圆角容器包进
<svg></svg>，用<rect rx="24" ry="24" stroke="#000" stroke-width="1"></rect>，完全绕过 CSS 渲染管线 - 接受视觉妥协：在 CSS 中用
filter: blur(0.1px)轻度柔化边缘，但仅限于纯色背景或无文字区域
最常被忽略的一点：锯齿问题在滚动或 hover 动画中会突然加剧——那说明你没加 backface-visibility: hidden，图层未稳定分组，合成抖动放大了原本轻微的渲染误差。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
