background-clip
文章源于
background-clip - CSS：层叠样式表 | MDN (mozilla.org)
background-clip
background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。
尝试一下
如果没有设置背景图片（background-image）或背景颜色（background-color），那么这个属性只有在边框（ border）被设置为非固实（soild）、透明或半透明时才能看到视觉效果（与 border-style 或 border-image 有关），否则，本属性产生的样式变化会被边框覆盖。
语法
/* 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
<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
p {
border: .8em darkviolet;
border-style: dotted double;
margin: 1em 0;
padding: 1.4em;
background: linear-gradient(60deg, 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);
}
结果
规范
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # background-clip |
| 初始值 | 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 GitHub| desktop | 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-pathproperty 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
漫思
