安卓 WebView 和 Chrome for Android 的 border-radius 白边本质是 Skia 渲染器在抗锯齿与图层合成时的 premultiplied alpha 混合误差，修复关键在于干预渲染层而非调整圆角值；首选 overflow: hidden + background-clip: padding-box，禁用无意义 transform 提升，必要时用 outline 替代 border。
安卓 WebView 和部分 Chrome for Android 渲染 border-radius 时出现白边，本质是抗锯齿与图层合成策略冲突导致的像素级漏色，并非 CSS 写错 —— 修复关键不是加更多圆角，而是干预渲染层。
为什么 border-radius 在安卓上会漏白边？
这不是 bug，而是硬件加速渲染路径下的副作用：当元素有 border-radius + 背景色 + 父容器非纯色背景（比如渐变、图片、深色模式下浅灰底）时，Android 的 Skia 渲染器在光栅化圆角边缘时，会把透明像素和父背景做不精确的 premultiplied alpha 混合，尤其在低 DPI 屏或旧版 WebView（如 Android 10 及以下）中更明显。
常见触发场景包括：
- 卡片组件用
background-color+border-radius: 12px放在body的浅灰背景上 - 使用
backdrop-filter或box-shadow后叠加圆角 - 元素设置了
transform: translateZ(0)强制 GPU 加速，反而加剧边缘采样误差
用 overflow: hidden + background-clip 截断溢出像素
最轻量、兼容性最好的方案：让圆角区域严格“裁剪”掉可能漏出的亚像素。核心是两步协同：
- 给容器加
overflow: hidden，物理截断渲染边界 - 显式声明
background-clip: padding-box，确保背景只画在 padding 区域内，不延伸到 border 下（即使没设 border，某些 Android 渲染器仍会按 border-box 做混合）
示例：
.card {
border-radius: 12px;
background-color: #fff;
background-clip: padding-box;
overflow: hidden;
}
注意：不要加 border（哪怕 border: 1px solid transparent），它会干扰 background-clip 行为，反而加重白边。
避免 transform 强制提升图层引发的重采样
很多方案习惯加 transform: translateZ(0) 或 will-change: transform 来“优化”，但在 Android 上这会让圆角重新走一遍 GPU 光栅化路径，放大亚像素误差。
- 移除所有无实际动画需求的
transform提升语句 - 如果必须用
will-change，仅在交互触发瞬间设置，交互结束立即清除 - 测试发现：Android 12+ Chrome 115+ 对
will-change: transform的处理已改善，但 Android 11 及以下仍建议回避
备选：用 outline 替代 border 防止混合污染
当确实需要描边效果（比如焦点态或选中态），border 会参与背景混合计算，而 outline 是独立绘制层，不参与 alpha 混合，天然规避白边。
- 用
outline: 2px solid #007aff替代border: 2px solid #007aff - 配合
outline-offset: -2px让描边向内收缩，视觉上贴近 border 效果 - 注意：
outline不占布局空间，若需保持尺寸一致，要手动调margin或padding
这个技巧在表单控件、按钮焦点态中特别有效，且不影响可访问性（outline 仍支持键盘导航聚焦）。
真正难处理的是嵌套圆角 + 毛玻璃（backdrop-filter）+ 深色模式切换的组合场景 —— 这时连 overflow: hidden 都可能被滤镜绕过，得靠多一层伪元素遮罩，但绝大多数业务组件，前三个方案覆盖 95% 以上的白边问题。记住：安卓圆角白边不是“修样式”，是“管渲染”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
