CSS3中backgroundclip背景裁切属性是什么-创新互联

本篇内容介绍了“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属性。注释：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前缀。

“CSS3中background clip背景裁切属性是什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！