加 background-clip: padding-box 可解决圆角背景溢出问题，因浏览器默认将背景铺满 border-box 区域；需满足有实线边框、border-radius > 0、不可用 box-shadow 模拟边框三个条件。
直接加 background-clip: padding-box 就能解决，不需要改结构、不依赖 overflow: hidden，副作用最小。
为什么 background-color 会从圆角外“漏出来”
浏览器默认把背景铺满 border-box 区域，也就是包含边框的整个矩形框。即使你写了 border-radius: 12px，背景色仍会填满那四个直角区域，只是边框本身被画成了圆弧——看起来像“撑破了”圆角。
这不是 bug，是 CSS 规范行为。Chrome/Firefox/Safari 都这么干，只是 Safari 和部分安卓 WebView（比如红米）对这种溢出更敏感，一眼就能看见白边或色块。
必须同时满足的三个条件
background-clip: padding-box 要生效，得卡准这三点：
立即学习“前端免费学习笔记（深入）”；
- 元素必须有实线边框，例如
border: 1px solid #000（dashed或dotted在旧版 Safari 下可能失效） -
border-radius值必须大于0 - 不能靠
box-shadow模拟边框——background-clip不管 shadow
Safari 和移动端的兼容写法
现代浏览器都支持 background-clip: padding-box，但 iOS 15.0–15.3 或旧版 Edge 需要前缀：
button {
border: 2px solid #333;
border-radius: 8px;
background: linear-gradient(135deg, #007aff, #005bb5);
background-clip: padding-box;
-webkit-background-clip: padding-box; /* Safari / iOS 15.0–15.3 */
}如果用了 border: none，或者设计上真不能加边框，那就得换方案：overflow: hidden（会裁子元素）或 -webkit-mask（更重，仅 Safari 必要时兜底）。
容易忽略的坑：background-image 和 :active 状态
纯色背景溢出用 background-clip 就够了，但以下两种情况它不管用：
-
background-image（含linear-gradient）在 Safari 下仍可能四角直出 → 同样加background-clip: padding-box，前提是边框存在且为实线 - 点击时
:active状态下背景突然变方 → 是-webkit-tap-highlight-color在作祟，加-webkit-tap-highlight-color: transparent即可
别一上来就套 overflow: hidden，它会砍掉绝对定位箭头、阴影、伪元素——这些往往是 UI 的关键细节，不是背景溢出问题该付出的代价。
