clip，英文意为“裁切，修剪”，所以很显然，background-clip属性肯定与背景裁切有关，而事实也正是如此。background-clip存在以下四个属性值，他们分别是：border-box、padding-box、content-box和text。

　　background-clip属性值：

　　值 说明

　　border-box 默认值。背景绘制在边框方框内（剪切成边框方框）

　　padding-box 背景绘制在衬距方框内（剪切成衬距方框）

　　content-box 背景绘制在内容方框内（剪切成内容方框）

　　text 给文本填充图片背景

　　background-clip浏览器支持

　　IE9+、Firefox、Opera、Chrome以及Safari支持background-clip属性。注释：InternetExplorer8以及更早的版本不支持background-clip属性。

　　background-clip属性讲解

　　接下来我将通过具体实例来对background-clip这几个属性值一一进行讲解。

　　border-box

　　.box{background-clip:border-box;}

　　border，意味着将边框以外的背景部分裁掉，所以最终效果与图一相同，也就是说，border-box是background-clip的默认属性值。

　　padding-box

　　.box{background-clip:padding-box;}

　　padding，意味着将内边距以外的背景部分裁掉

　　content-box

　　.box{background-clip:content-box;}

　　content，意味着将内容以外的背景部分裁掉

　　text

　　.box{-webkit-text-fill-color:transparent;background:-webkit-linear-gradient(right,#0f0,#00f);-webkit-background-clip:text;}

　　text，意味着将文字轮廓以外的背景部分裁掉而只留下文字轮廓以内的部分，而此时我们只需要通过设置文字为透明色即可透过文字看到盒子背景色

　　background-clip:text，目前需要加上webkit前缀。