CSS3中background-clip背景裁切属性

发布时间:2021-01-12 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了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前缀 。

总结


以上是前端之家为你收集整理的CSS3中background-clip背景裁切属性全部内容,希望文章能够帮你解决CSS3中background-clip背景裁切属性所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。