摘要 今天小编跟大家讲解下有关CSS3中background-clip背景裁切属性 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS3中backgro

今天小编跟大家讲解下有关CSS3中background-clip背景裁切属性 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS3中background-clip背景裁切属性 的相关资料，希望小伙伴们看了有所帮助。

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前缀 。

来源：爱蒂网