background-clip
文章源于
background-clip - CSS:层叠样式表 | MDN (mozilla.org)
background-clip
background-clip
设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面。
尝试一下
如果没有设置背景图片(background-image
)或背景颜色(background-color
),那么这个属性只有在边框( border
)被设置为非固实(soild)、透明或半透明时才能看到视觉效果(与 border-style
或 border-image
有关),否则,本属性产生的样式变化会被边框覆盖。
语法
1 2 3 4 5 6 7 8 9 10 | /* Keyword values */ background- clip : border-box; background- clip : padding-box; background- clip : content-box; background- clip : text; /* Global values */ background- clip : inherit; background- clip : initial; background- clip : unset; |
值
border-box
-
背景延伸至边框外沿(但是在边框下层)。
padding-box
-
背景延伸至内边距(
padding
)外沿。不会绘制到边框处。 content-box
-
背景被裁剪至内容区(content box)外沿。
text
实验性-
背景被裁剪成文字的前景色。
标准语法
示例
HTML
1 2 3 4 | < p class="border-box">The background extends behind the border.</ p > < p class="padding-box">The background extends to the inside edge of the border.</ p > < p class="content-box">The background extends only to the edge of the content box.</ p > < p class="text">The background is clipped to the foreground text.</ p > |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | p { border : . 8em darkviolet; border-style : dotted double ; margin : 1em 0 ; padding : 1.4em ; background : linear-gradient( 60 deg, red , yellow, red , yellow, red ); font : 900 1.2em sans-serif ; text-decoration : underline ; } .border-box { background- clip : border-box; } .padding-box { background- clip : padding-box; } .content-box { background- clip : content-box; } .text { background- clip : text; -webkit-background- clip : text; color : rgba( 0 , 0 , 0 ,. 2 ); } |
结果
规范
初始值 | border-box |
---|---|
适用元素 | all elements. It also applies to ::first-letter and ::first-line . |
是否是继承属性 | 否 |
计算值 | as specified |
Animation type | discrete |
浏览器兼容性
Report problems with this compatibility data on GitHubdesktop | mobile | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
background-clip |
|||||||||||
content-box |
|||||||||||
text |
Legend
Tip: you can click/tap on a cell for more information.
Full supportFull support
Partial supportPartial support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.
参见
- The
clip-path
property creates a clipping region that defines what part of an entire element should be displayed. - Background properties:
background
,background-color
,background-image
- Introduction to the CSS box model
漫思
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
· 面试官:你是如何进行SQL调优的?
2022-03-14 各个tab的问题
2022-03-14 打印程序
2022-03-14 我心目中的编程高手(完整版)
2022-03-14 GitHub上整理的一些工具
2022-03-14 Microsoft Visual Studio 配置汇编语言开发环境
2022-03-14 React Laser Beam
2019-03-14 数组的一些运算操作