background-clip

版本： CSS3

background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。

示例

/* 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;

如果没有设置背景图片（ background-image ）或背景颜色（ background-color ），那么这个属性只有在边框（ border ）被设置为非固实（soild）、透明或半透明时才能看到视觉效果（与 border-style 或 border-image 有关），否则，本属性产生的样式变化会被边框覆盖。

浏览器支持

IE9以上版本的浏览器都支持 background-clip

语法：

background-clip ：border-box | padding-box | content-box | text

取值：

• 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);
}