直接加 background-clip: padding-box 可解决背景溢出圆角问题，但需同时满足三个条件：元素必须有非 none 的边框、border-radius 大于 0、不能用 box-shadow 模拟边框。
直接加 background-clip: padding-box 就能解决，但必须满足三个硬性条件，缺一不可。
为什么 background-color 会从圆角外“漏出来”
这不是 bug，是浏览器默认把背景铺满 border-box 区域——也就是包含边框的整个矩形框。哪怕你写了 border-radius: 8px，纯色或渐变背景仍会填满那四个直角区域，只是边框被画成了圆弧，视觉上像“撑破了”圆角。
Safari 和部分安卓 WebView（比如红米、旧版 Android 4.2.x）对这种溢出最敏感，一眼就能看见白边或色块。
background-clip: padding-box 生效的三个必要条件
这个属性只控制背景绘制范围，不是生成圆角的手段。它生效的前提是：
立即学习“前端免费学习笔记（深入）”；
- 元素必须有非
none的边框，例如border: 1px solid transparent或border: 2px solid #000；dashed/dotted在旧版 Safari 下可能失效 -
border-radius值必须大于 0（如border-radius: 8px） - 不能靠
box-shadow模拟边框——background-clip对 shadow 完全无效
常见错误：只写 background-clip: padding-box 却忘了加边框，或者用了 border: none，结果毫无作用。
Android 红米/旧版 WebView 的兼容写法
现代浏览器都支持 background-clip: padding-box，但 iOS 15.0–15.3、旧版 Edge（≤12）需要前缀：
.btn {
border: 2px solid #333;
border-radius: 8px;
background: linear-gradient(135deg, #007aff, #005bb5);
background-clip: padding-box;
-webkit-background-clip: padding-box; /* iOS 15.0–15.3 / 旧 Edge */
}如果设计上真不能加可见边框，border: 1px solid transparent 是最轻量的兜底方案——它满足“可视边框”条件，又不破坏 UI。
别一上来就用 overflow: hidden
overflow: hidden 虽然兼容性好（IE9+），但它会裁掉所有超出圆角的内容：
- 绝对定位的箭头、下拉图标
- 伪元素（
::before/::after）做的装饰 - 阴影（
box-shadow）和文字描边
这些往往是 UI 的关键细节，不该为背景溢出问题付出这种代价。真正需要物理裁剪子元素时，再考虑 clip-path: inset(0 round 8px)，但注意它在动画中可能掉帧，且数值必须和 border-radius 严格一致。
