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前缀 。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！