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有关），否则，本属性产生的样式变化会被边框覆盖。

浏览器支持

语法：

取值：

• border-box：背景延伸至边框外沿（但是在边框下层）。
• padding-box：背景延伸至内边距（padding）外沿。不会绘制到边框处。
• content-box：背景被裁剪至内容区（content box）外沿。
• text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪。

例子

//html
the background extends behind the border.
the background extends to the inside edge of the border.
the background extends only to the edge of the content box.
the background is clipped to the foreground text.
//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);
}

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com