如何使用CSS _background-clip属性实现背景图圆角剪裁效果？

本文共计1032个文字，预计阅读时间需要5分钟。

要改变背景图的裁剪方式，关键在于设置CSS属性`background-clip`。默认情况下，`background-clip`的值是`border-box`，这意味着背景图会延伸到边框区域，包括边框本身。但如果边框不透明，你可能看不到背景图覆盖边框的部分。

如果你想要背景图只显示在元素的内部，包括内边距区域，但不包括边框，可以将`background-clip`设置为`padding-box`。这样，背景图只会绘制到内边距区域，边框区域将是透明的。

例如，如果边框是实色的或带有圆角的，使用`padding-box`可以让你清楚地看到背景图被整整齐齐地裁剪掉。这就是圆角裁剪生效的前提——背景图被裁剪成圆角形状，而不是延伸到边框区域。

• 必须配合 border-radius 使用，否则 padding-box 和 border-box 在视觉上几乎没区别
• content-box 更激进，连内边距都不画背景，一般不用来搞圆角剪裁
• 如果父容器有 overflow: hidden，它也能“剪”圆角，但那是靠裁剪容器，不是靠 background-clip

为什么 background-clip 不生效？常见三类原因

最常卡在这三个地方：背景图没设对、边框没设对、元素没尺寸。它不是独立起效的属性，得和别的样式配合才能看出效果。