background-clip: padding-box 能切掉圆角外背景是因为它将背景限制在 padding-box 内，避开 border 区域，从而贴合 border-radius 内轮廓；需同时满足有非 none 边框、border-radius > 0、不可用 box-shadow 模拟边框三个条件。
background-clip: padding-box 为什么能切掉圆角外的背景
浏览器默认把 background-color 和 background-image 铺满整个 border-box 区域，也就是包含边框的完整矩形。哪怕你写了 border-radius: 8px，背景依然会填满那四个直角区域——边框被画成圆弧，但背景没跟着裁，看起来就像“撑破”了圆角。
加 background-clip: padding-box 后，背景只绘制在内边距（padding）边缘以内，自然贴合 border-radius 的内侧轮廓，溢出部分直接不画。
- 它对纯色、渐变、图片背景都生效
- 不需要改 HTML 结构，也不依赖
overflow: hidden - 副作用极小，不影响伪元素、阴影、子元素定位
必须同时满足的三个硬性条件
background-clip: padding-box 不是“一加就灵”，缺一不可：
- 元素必须有非
none的实线边框，例如border: 1px solid transparent或border: 2px solid #333；dashed/dotted在旧版 Safari 下可能失效 -
border-radius值必须大于 0，比如border-radius: 8px - 不能靠
box-shadow模拟边框——background-clip对 shadow 完全无效
常见错误：只写 background-clip: padding-box 却忘了加边框，或用了 border: none，结果毫无作用。
立即学习“前端免费学习笔记（深入）”；
Safari 和旧版 Android WebView 的兼容写法
现代浏览器（Chrome/Firefox/Edge）原生支持 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;
}
如果 UI 真不能加可见边框，border: 1px solid transparent 是最轻量的兜底方案——它满足“有边框”条件，又不破坏视觉。
别一上来就用 overflow: hidden
overflow: hidden 虽然兼容性好（IE9+），但它会物理裁剪所有超出圆角的内容：
- 绝对定位的下拉箭头、气泡提示
-
::before/::after生成的装饰图标 -
box-shadow和文字描边效果
这些往往是 UI 的关键细节，不该为背景溢出问题付出这种代价。真正需要裁剪子元素时，再考虑 clip-path: inset(0 round 8px)，但注意数值必须和 border-radius 严格一致，且动画中可能掉帧。
