开发者社区> 前端王睿> 正文

CSS3背景裁切属性——background-clip

简介: CSS中的background属性想必大家已经用了无数遍,但是对于CSS3属性background-clip你可能还不太了解,那么今天我们就专门来聊聊这个属性。
+关注继续查看

CSS中的background属性想必大家已经用了无数遍,但是对于CSS3属性background-clip你可能还不太了解,那么今天我们就专门来聊聊这个属性。

clip,英文意为 “裁切,修剪”,所以很显然,background-clip属性肯定与背景裁切有关,而事实也正是如此。

background-clip存在以下四个属性值,他们分别是:

border-box、padding-box、content-box 和 text

接下来我将通过具体实例来对background-clip这几个属性值一一进行讲解。

1. 不设置 background-clip 属性

/*CSS*/
.box{ display: inline-block; width: 200px; height: 200px; margin: 20px; padding: 20px; border: 10px dashed #000; background-color: #ff0;}
<!--HTML-->
<div class="box">想要学习更多前端知识,欢迎关注微信公众号:前端微站</div>

显示效果:

图一

2. border-box

/*CSS*/
.box1{ background-clip: border-box;}
<!--HTML-->
<div class="box box1">想要学习更多前端知识,欢迎关注微信公众号:前端微站</div>

border,意味着将边框以外的背景部分裁掉,所以最终效果与图一相同,也就是说,border-boxbackground-clip的默认属性值。

3. padding-box

/*CSS*/
.box2{ background-clip: padding-box;}
<!--HTML-->
<div class="box box2">想要学习更多前端知识,欢迎关注微信公众号:前端微站</div>

padding,意味着将内边距以外的背景部分裁掉,所以最终效果如图二所示:

图二

4. content-box

/*CSS*/
.box3{ background-clip: content-box;}
<!--HTML-->
<div class="box box3">想要学习更多前端知识,欢迎关注微信公众号:前端微站</div>

content,意味着将内容以外的背景部分裁掉,所以最终效果如图三所示:

图三

5. text

/*CSS*/
.box4{ -webkit-text-fill-color: transparent; background: -webkit-linear-gradient(right,#0f0,#00f); -webkit-background-clip: text;}
<!--HTML-->
<div class="box box4">想要学习更多前端知识,欢迎关注微信公众号:前端微站</div>

text,意味着将文字轮廓以外的背景部分裁掉而只留下文字轮廓以内的部分,而此时我们只需要通过设置文字为透明色即可透过文字看到盒子背景色,所以最终效果如图四所示:

图四

兼容性:

background-clip: text ,目前需要加上webkit前缀

本文重点总结

① background-clip 用于背景裁切,有 border-box、padding-box、content-box 和 text 四个属性值
② border-box 裁掉边框以外的背景部分,为默认值
③ padding-box 裁掉内边距以外的背景部分
④ content-box 裁掉内容以外的背景部分
⑤ text 裁掉文字轮廓以外的背景部分,目前需加webkit前缀

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
适合个人搭建博客网站的WordPress免费开源主题汇总
适合个人搭建博客网站的WordPress免费开源主题汇总
13 0
超详细的《防疫健康管理软件》开发报告奉上!【文末获取完整源码】
超详细的《防疫健康管理软件》开发报告奉上!【文末获取完整源码】
6 0
分享几段祖传的Python代码,拿来直接使用!
今天分享几段工作生活中常用的代码,都是最为基础的功能和操作,而且大多还都是出现频率比较高的,很多都是可以拿来直接使用或者简单修改就可以放到自己的项目当中
8 0
Java开发初级5.22.2
Java开发初级5.22.2
6 0
使用 Pandas, Jinja 和 WeasyPrint,轻松创建一个 PDF 报表
使用 Pandas, Jinja 和 WeasyPrint,轻松创建一个 PDF 报表
11 0
最好用的 8 款 React Datepicker 时间日期选择器测评推荐
React 时间日期选择器(date-timepicker)组件,与表单、富文本、表格、拖拽等组件一样,是大家用 React 搭建项目时使用最频繁的组件之一。React DateTimePicker 除了基础选择日期时间外,还有非常多样的功能配合不同场景使用,比如 12/24小时,禁止选择某些日期,高亮某些日期,夜间模式,多语言,酒店订单的特别场景等。本文记录了我自己使用多年最好用的 8 款 React DateTimePicker 组件,每一款都经过我实际测试,推荐给大家。
12 0
一篇文章搞懂数据仓库:数据应用--OLAP
一篇文章搞懂数据仓库:数据应用--OLAP
7 0
深度学习模型实战-深度学习模型在各大公司实际生产环境的应用讲解文章
建这个仓库的是因为工作之后发现生产环境中应用的模型需要做到速度和效果的平衡,并不是越复杂越好。所以一味的追求新的模型效果不大(并不是不追,也要多看新东西)。学到模型最终是要用,而且要用好,于是就建了这么个仓库,积累一下深度学习模型在各个公司中的应用以及细节,这样在自己工作中可以做到借鉴。主要是罗列一些各大公司分享的文章,涉及到搜索/推荐/自然语言处理(NLP),持续更新... 仓库地址:https://github.com/DA-southampton/Tech_Aarticle/edit/master/README.md
5 0
Java JVM知识汇总
1、JVM 是什么? Java虚拟机(Java virtual machine,JVM)是 Java 程序运行基础,Java虚拟机有自己完善的硬件架构,如处理器、堆栈等,还具有相应的指令系统。 Java虚拟机本质上就是一个程序,当它在命令行上启动的时候,就开始执行保存在某字节码文件中的指令。Java语言的可移植性正是建立在Java虚拟机的基础上。任何平台只要装有针对于该平台的Java虚拟机,字节码文件(.class)就可以在该平台上运行。这就是“一次编译,多次运行”。
6 0
+关注
前端王睿
3年Web前端开发工程师,目前就职于上海知名媒体&mdash;&mdash;新闻晨报,个人公众号:前端微站
65
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载