background-clip
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* Some parts of this feature may have varying levels of support.
background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。
尝试一下
background-clip: border-box; background-clip: padding-box; background-clip: content-box; background-clip: text; color: transparent; <section id="default-example"> <div id="example-element">This is the content of the element.</div> </section> #example-element { background-image: url("/shared-assets/images/examples/leopard.jpg"); color: #d73611; text-shadow: 2px 2px black; padding: 20px; border: 10px dashed #333; font-size: 2em; font-weight: bold; } 如果没有设置背景图片（background-image）或背景颜色（background-color），那么这个属性只有在边框（ border）被设置为非固实（soild）、透明或半透明时才能看到视觉效果（与 border-style 或 border-image 有关），否则，本属性产生的样式变化会被边框覆盖。
语法
css
/* 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实验性-
背景被裁剪成文字的前景色。
标准语法
background-clip =
<bg-clip>#
<bg-clip> =
<visual-box> |
[ border-area || text ]
<visual-box> =
content-box |
padding-box |
border-box
示例
HTML
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
css
p { border: 0.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, 0.2); } 结果
规范
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # background-clip |
| CSS Backgrounds Module Level 4 # background-clip |
| 初始值 | border-box |
|---|---|
| 适用元素 | 所有元素. It also applies to ::first-letter and ::first-line. |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| 动画类型 | a repeatable list |
浏览器兼容性
Loading…
参见
- 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