background-clip: padding-box可解决圆角容器中背景溢出问题，使背景严格贴合内边距边缘，避免覆盖边框；适用于带实线边框且border-radius>0的元素，IE9+及主流浏览器支持，旧版Edge需加-webkit前缀。
background-clip: padding-box 解决圆角背景溢出
圆角容器（border-radius）里设了背景色或渐变，但背景“撑破”圆角、跑到边框外——这不是 bug，是浏览器默认行为：background-clip 默认值是 border-box，背景会铺满整个 border 区域，包括圆角过渡的外缘部分。
加 background-clip: padding-box 就能切掉边框区域的背景，让背景严格贴着内边距（padding）边缘，和圆角视觉一致。
- 只对带
border且border-radius> 0 的元素有效；纯border: none时加不加没区别 - 如果用了
box-shadow模拟边框，background-clip不影响 shadow，得单独调shadow的border-radius或用overflow: hidden - IE 9+ 支持，Firefox / Chrome / Safari 都没问题；但旧版 Edge（≤12）不支持，需加
-webkit-background-clip: padding-box兼容
什么时候必须加 background-clip: padding-box
典型场景：按钮、卡片、标签页 tab，用了实线边框 + 圆角 + 背景渐变。不加的话，渐变色会在圆角拐角处“多出来一截”，尤其在高对比度下非常明显。
比如这个按钮：
立即学习“前端免费学习笔记（深入）”；
.btn {
border: 2px solid #333;
border-radius: 8px;
background: linear-gradient(to right, #007bff, #0056b3);
}
结果背景会盖住部分边框，视觉上像边框被“吃掉”。加一行就干净：
.btn {
background-clip: padding-box;
}
background-clip 的三个常用值怎么选
background-clip 有三个关键取值，别乱套：
-
border-box：默认值，背景画满 border 区域（含圆角外缘），容易溢出 -
padding-box：背景止于 padding 边缘，正好对齐border-radius内侧，最常用 -
content-box：背景只覆盖 content 区域，如果写了padding，背景会和边框之间留白，慎用
注意：background-clip 不影响 background-origin，后者管的是背景图/渐变的“起点”，两者常一起配着用，但别混淆。
比 background-clip 更隐蔽的溢出原因
有时候加了 background-clip: padding-box 还是溢出？先检查这几点：
- 父容器有没有
overflow: visible（默认值），而子元素的border-radius和transform组合导致渲染异常 - 是否用了
backface-visibility: hidden或will-change: transform，某些 Chrome 版本下会干扰background-clip渲染 - 背景是图片（
background-image）且尺寸没设background-size: cover或contain，图片本身拉伸变形也会看起来像溢出
真正要稳，background-clip: padding-box 是第一道防线，但得配合 border、padding、overflow 一起看——圆角背景不是单一样式的事，是盒模型几层叠加的结果。
