什么是background-clip？

background-clip属性用于设置背景颜色的范围。打个比方我们绘制一个200x200像素的背景红色的div块。

当我们增加内边距20的时候

我们可以发现与之前的相比，背景颜色也同样增大了20px的内边距范围。

只需要内容区域是背景色

现在我们有一个问题，只需要内容区域是背景色，而内边距不需要背景色，我们应该如何实现呢？这时候就需要这章节我们所学习的background-clip背景范围属性。用于设置元素背景的范围区域。

background-clip参数border-box;

这个属性是我们正常设置背景颜色的默认范围，即包括边框内边距以及内容区域。

background-clip参数padding-box;

padding-box是设置内边距和内容为背景范围。与border-box没有太大差别，目前想不出案例，就当做一致吧。

background-clip参数content-box;

content-box属性也就是这篇文章开头的案例想实现的方法。它是将内容区域作为背景范围。即设置背景颜色也仅仅渲染内容区域。

从图中我们可以看到，只有内容区域被渲染成了背景颜色，而内边距区域没有渲染成背景颜色。

总结

background-clip背景区域范围属性可以让我们实现，在外边距无法设置的情况下，需要设置不包括内边距的极端情况背景颜色渲染。如果没有background-clip属性，我们将需要两个div进行嵌套操作。