background-clip: padding-box 使背景仅显示在内边距区，配合 border-radius 才能实现背景图圆角裁剪；border-box 则默认让背景延伸至边框内侧，视觉上无裁剪效果。
background-clip: padding-box 和 border-box 的视觉差异在哪
关键就看背景图是否铺到边框区域。默认是 background-clip: border-box，背景会延伸到边框内侧（含边框下），但边框本身不透明时，你根本看不出它“盖住”了背景；设成 padding-box 后，背景只画在内边距区域，边框完全“空着”，此时若边框是实色或带圆角，就能看到背景被整齐裁掉——这才是圆角剪裁生效的前提。
- 必须配合
border-radius使用，否则padding-box和border-box在视觉上几乎没区别 -
content-box更激进，连内边距都不画背景，一般不用来搞圆角剪裁 - 如果父容器有
overflow: hidden，它也能“剪”圆角，但那是靠裁剪容器，不是靠background-clip
为什么 background-clip 不生效？常见三类原因
最常卡在这三个地方：背景图没设对、边框没设对、元素没尺寸。它不是独立起效的属性，得和别的样式配合才能看出效果。
- 没设
background-image或background-color——background-clip只管“已有背景”的绘制范围，没背景就什么也 clip 不出来 - 边框是
border: none或border: 0—— 没边框，padding-box和border-box就完全重合，看不出变化 - 元素宽高为
0或内容塌陷（比如只有 inline 元素且没设display: block）—— 没渲染区域，自然没背景可裁
background-clip + border-radius 圆角剪裁的最小可行写法
要让背景图真正按圆角边缘被裁切，这四行缺一不可：
div {
background-image: url("bg.jpg");
background-size: cover;
border-radius: 12px;
background-clip: padding-box;
}
注意：background-clip: padding-box 必须显式写出，不能依赖默认值；background-size: cover（或 contain）也建议加上，否则小图平铺时圆角裁切效果不明显。
立即学习“前端免费学习笔记（深入）”；
- 如果用
background-color替代图片，效果一样可见，但不如图片直观 - 不要加
border样式——加了反而干扰观察，纯靠border-radius触发裁切边界即可 - 某些旧版 Safari 对
background-clip: padding-box渲染有偏差，建议加-webkit-background-clip: padding-box
和 mask-image 做圆角剪裁有什么本质区别
background-clip 是“限制背景的绘制区域”，不影响元素自身形状；mask-image 是“遮罩整个元素”，连边框、文字、子元素都会被裁掉。这是根本性差别，别混用。
- 想只让背景图圆角，保留边框线/文字溢出/子元素显示 → 用
background-clip - 想让整个块（含边框、文字、图标）都严格按圆角显示 → 用
mask-image: radial-gradient(...)或mask-border -
background-clip兼容性好（IE9+），mask-image在 Safari 15.4+ 才稳定支持radial-gradient作为 mask
圆角剪裁这件事，很多人卡在以为设了 border-radius 背景就自动跟着圆，其实浏览器默认就是让它“盖过”圆角区域的——得手动告诉它：“停，别画那么远”。
