如果没有设置背景颜色或图片,那么这个属性只有在边框(border)设置为透明或半透明时才能看到视觉效果,不然的话,这个属性造成的样式变化会被边框覆盖住。
初始值 border-box
适用元素 all elements. It also applies to ::first-letter and ::first-line.
是否是继承属性 否
适用媒体 visual
计算值 as specified
Animation type discrete
正规顺序 the unique non-ambiguous order defined by the formal grammar
语法
background-clip: border-box
background-clip: padding-box
background-clip: content-box
background-clip: inherit
background-clip: text (只有chrome支持)
值
border-box:背景延伸到边框外沿(但是在边框之下)。
padding-box:边框下面没有背景,即背景延伸到内边距外沿。
content-box:背景裁剪到内容区 (content-box) 外沿。
text:背景被裁剪为文字的前景色(只有chrome支持)。
示例
<p class="border-box">The yellow background extends behind the border.</p> <p class="padding-box">The yellow background extends to the inside edge of the border.</p> <p class="content-box">The yellow background extends only to the edge of the content box.</p> p { border: 5px navy; border-style: dotted double; margin: 1em; padding: 2em; background: #F8D575; } .border-box { background-clip: border-box; } .padding-box { background-clip: padding-box; } .content-box { background-clip: content-box; }运行下面代码查看效果:
提示:您可以先修改部分代码再运行