CSS-背景裁剪 | background-clip-阿里云开发者社区

CSS-背景裁剪 | background-clip

2018-09-12 1586

简介：

+关注继续查看

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;

如果没有设置背景颜色或图片，那么这个属性只有在边框（border）设置为透明或半透明时才能看到视觉效果（查看 border-style或border-image），不然的话，这个属性造成的样式变化会被边框覆盖住。

初始值	border-box
适用元素	all elements. It also applies to ::first-letter and ::first-line.
是否是继承属性	no
适用媒体	visual
计算值	as specified
Animation type	discrete
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

值

border-box——背景延伸到边框外沿（但是在边框之下）。padding-box边框下面没有背景，即背景延伸到内边距外沿。

content-box——背景裁剪到内容区 (content-box) 外沿。text背景被裁剪为文字的前景色。

正式语法

<box>#where 
<box> = border-box | padding-box | content-box

示例

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.3em 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;
  color: rgba(0,0,0,.2);
}

结果

规范

Specification	Status	Comment
CSS Backgrounds and Borders Module Level 3The definition of 'background-clip' in that specification.	Candidate Recommendation	Initial definition.
CSS Backgrounds and Borders Module Level 4The definition of 'background-clip' in that specification.	Editor's Draft	Add text value.