本文共 1161 字，大约阅读时间需要 3 分钟。

1.作用：CSS3中的Background-clip属性，其主要是用来确定背景的裁剪区域，换句话说，就是如何控制元素背景显示区域

2.语法：background-clip ： border-box || padding-box || content-box

3.取值说明：

1.border-box:此值为默认值，背景从border区域向外裁剪，也就是超出部分将被裁剪掉

2.padding-box：背景从padding区域向外裁剪，超过padding区域的背景将被裁剪掉

3.context-box：背景从content区域向外裁剪，超过context区域的背景将被裁剪掉

不知道大家没有深入的去了解Box Model中background部分，background在Box Model中，他是布满整个元素的Box区域的，并不是从padding内部开始，只不过边框部分遮住了部分background，但有一点需要注意，background-color是从元素的边框左上角起到右下角止，而background-image却不一样，他是从padding边缘的左上角起而到border的右下角边缘止，如果大家对上面那句话不太好理解的话，我们一起来看一个简单的Box Model加上边框和背景色，背景图片的示意图

注：但如何能让他们在统一的位置显示呢？那就是今天所要介绍的background-clip，这个属性就会让背景色和背景图片统一在相同的位置，前面也简单说过，background-clip会根据不同的属性值进行裁剪多了的背景部分

4.实例：

DEMO1：background-clip:border-box

首先在前面的demo基础上，给div.demo加上一个class名“borderBox”,然后在这个Demo上加上background-box:border-box的属性

从效果图中可以看出，background-clip取值为border-box时，跟没有设置background-clip效果是完全一样的，那是因为background-clip的默认值为border-box

DEMO2：background-clip:padding-box

此时效果就与原来默认下有明显的区别了，图上可以得知，只要超过padding边缘的背景都被裁剪掉了，此时的裁剪并不是让背景成比例裁剪，而是直接将超过padding边缘的背景剪切掉

DEMO3:background-clip:content-box

明显背景只在内容区域显示，超过内容边缘的背景直接被裁剪掉了

5.给文本填充图片背景、

就是background-clip:text配合其私有属性-webkit-text-fill-color: transparent