黑边本质是浏览器抗锯齿与亚像素渲染不一致导致的半透明边缘叠加失真。常见于透明/渐变背景、GPU加速层、overflow: hidden错位等场景；有效方案是伪元素垫底、统一整数单位、禁用sub-pixel干扰，并须真机验证。
border-radius 渲染黑边的本质是抗锯齿与像素对齐问题
所谓“黑边”，不是 CSS 写错了，也不是颜色漏了，而是 WebKit（Safari/iOS）、Blink（Chrome/Edge）和 Gecko（Firefox）在绘制圆角边缘时，对 sub-pixel 边界、alpha 混合、硬件加速层叠上下文的处理策略不一致。尤其在 transform: scale()、zoom、或高 DPI 屏幕下，边缘常出现 1px 灰/黑/暗色杂边——本质是半透明像素被错误叠加或未正确 blend。
哪些场景必现黑边？优先检查这三点
黑边不是随机出现，它高度依赖渲染上下文：
-
border-radius配合background: transparent或渐变背景时最明显（无纯色底衬，抗锯齿采样失真） - 元素处于
will-change: transform或transform: translateZ(0)强制 GPU 加速层时，部分 Safari/iOS WebView 会触发边缘 aliasing - 父容器设了
overflow: hidden且子元素有轻微位移（如position: relative; top: -0.5px），导致裁剪边界与绘制边界错位
绕过黑边的实操方案（按推荐顺序）
别硬调 box-shadow 盖黑边，那是掩耳盗铃。真正有效的是控制渲染路径：
- 给圆角元素加一层「垫底」：用
::before伪元素铺满、设background-color: #fff（或与背景一致的 solid 色），再把主内容层叠其上 —— 这能提供干净的 alpha 基底，消除半透叠加杂色 - 禁用 sub-pixel 渲染干扰：加
backface-visibility: hidden+transform: translateZ(0)组合（注意：单独用后者反而加剧黑边） - 避免
border-radius与border共存时单位混用：比如border: 1.5px+border-radius: 4px，浏览器可能将 1.5px 四舍五入为 1px 或 2px，造成内外半径错配，边缘发虚 → 统一用整数px - 在 iOS Safari 中，若用了
background: radial-gradient(...)，务必补background-clip: padding-box，否则渐变溢出到边框区，和抗锯齿交叠后强化黑边感
为什么 autoprefixer 和前缀解决不了这个问题
黑边不是语法兼容问题，-webkit-border-radius 在现代浏览器里早已被忽略；它也不属于文档模式或 IE 兼容范畴。这是渲染管线底层行为差异，连 Chrome DevTools 的 “Rendering” 面板里都看不到对应开关。最务实的做法是：接受它存在，用视觉层叠策略隔离它——就像处理 outline 那样，不修复，只遮蔽。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是：同一段 CSS，在 macOS Safari 和 iOS Safari 上表现可能完全不同；而你在桌面调试时看到“没问题”，真机一测就黑边刺眼。上线前务必用真机+实际缩放比例验证。
