css中的background属性想必大家已经用了无数遍，但是对于css3属性background-clip你可能还不太了解，那么今天我们就专门来聊聊这个属性。 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 属性。注释：Internet Explorer 8 以及更早的版本不支持 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前缀 。