background-clip允许你控制背景图片或颜色延伸到一个元素的内间距(padding)或内容(content)之外的距离。
.frame {
background-clip: padding-box;
}
值
border-box是默认值。它允许背景一直延伸到元素边框(border)的外边缘。
padding-box 在元素内间距(padding)的外边缘处剪切背景，并且不允许背景延伸进边框(border)。
content-box 在元素内容盒子的边缘剪切背景。
inherit将父级的background-clip设置应用于所选元素。
演示
background-clip在行动中得到最好的阐释，因此我们将两个演示放在一起以展示它是如何工作的。
第一个演示，每个div内部都有一个段落。段落是div的内容。每个div有一个黄色背景和一个5像素、半透明的浅蓝色边框。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>background-clip</title>
<meta name='description' content='background-clip'>
<meta name='keywords' content='background-clip'>
<style>
div {
background-color: yellow;
width: 225px;
padding: 1em 0;
border: 5px solid rgba(156, 224, 251, .5);
}
.nomargin {
margin: 0;
}
#border-box {
background-clip: border-box;
}
#padding-box {
background-clip: padding-box;
}
#content-box {
background-clip: content-box;
}
/* 外围样式, 与background-clip无关 */
body {
font-family: sans-serif;
}
div {
margin-bottom: 2em;
}
</style>
</head>
<body>
<h2>background-clip: border-box;</h2>
<div id="border-box">
<p>This paragraph is the content.</p>
</div>
<h2>background-clip: padding-box;</h2>
<div id="padding-box">
<p>This paragraph is the content.</p>
</div>
<h2>background-clip: content-box;</h2>
<h3>browser default paragraph margins</h3>
<div id="content-box">
<p>This paragraph is the content.</p>
</div>
<h2>background-clip: content-box;</h2>
<h3>paragraph is set to margin: 0;</h3>
<div id="content-box">
<p class="nomargin">This paragraph is the content.</p>
</div>
</body>
</html>
background-clip: border-box;
This paragraph is the content.
background-clip: padding-box;
This paragraph is the content.
background-clip: content-box;
浏览器默认段落margin值
This paragraph is the content.
background-clip: content-box;
段落设置 margin: 0;
This paragraph is the content.
默认情况下或者设置为background-clip:border-box;，黄色背景一直延伸到边框的外边缘。请注意边框看起是绿色的，是因为它下方有黄色背景。
当background-clip改变为padding-box时，背景颜色在元素填充(padding)结束的位置就停止了。请注意边框是蓝色的，是因为背景不允许进入边框区域。
使用background-clip:content-box;，背景颜色仅仅适用于div的内容，在本例中是单个段落元素。div的填充和边框并没有背景颜色。但是，还有值得一提的小细节：颜色延伸到内容的空白区域。查看第一个和第二个例子与使用content-box之间的差异。
第一个content-box示例，浏览器默认margin值应用于段落，背景在段落margin区域之外剪切(这里是指背景区域包括了段落的margin区域，但是在段落margin之外就没有div的背景颜色区域了。)。在第二个例子中，在CSS中设置margin值为0，背景在文本边缘开始剪切。
下面交互性展示带有背景图片的background-clip。此演示中的内容是一个较小的空div。
<div class="box " id='border-box'>
<div class="little_box"></div>
</div>
<div class="box " id='padding-box'>
<div class="little_box"></div>
</div>
<div class="box " id='content-box'>
<div class="little_box"></div>
</div>
.box {
position: relative;
background: #545454 url(images/clipboard.png);
height: 200px;
width: 200px;
margin: 0 auto;
border: 18px solid rgba(0, 0, 0, 0.2);
background-clip: border-box;
background-origin: border-box;
background-size: cover;
background-repeat: no-repeat;
padding: 30px;
margin:2em auto;
}
.little_box {
text-align: center;
color: white;
font-size: 1.5em;
width: 100%;
height: 100%;
padding: 4px;
box-sizing: border-box;
}
#border-box {
background-clip: border-box;
}
#padding-box {
background-clip: padding-box;
}
#content-box {
background-clip: content-box;
}
border-box
padding-box
content-box
此演示也是应用于background-size：cover和background-repeat:no-repeat加上background-clip来控制背景图片，否则图片将重复平铺到裁剪位置。
文本
有一个引擎前缀版本，可应用于将背景剪切为文本。为了看到这项工作，文本也需要透明。幸运的是，还有另外一个浏览器前缀文本颜色属性，它可以有效覆盖颜色，由于它有一个回退使其可以安全使用。
.background-clip-text {
/* 如果我们可以裁剪, 就那么做吧 */
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
/* 通过文本会展示什么
~ 或者 ~
那个元素的背景是什么 */
background: whatever;
/* 回退文本颜色
~ 或者 ~
文本的实际颜色，它更适合在背景上起作用 */
color: red;
}
Firefox, Chrome, and Safari 支持这个属性.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>background-clip</title>
<meta name='description' content='background-clip'>
<meta name='keywords' content='background-clip'>
<style>
@import url(https://fonts.googleapis.com/css?family=Syncopate);
body {
background: black;
text-align: center;
padding: 120px 20px;
}
h1 {
display: inline-block;
font-size: 80px;
line-height: 0.9;
padding: 20px;
font-family: 'Syncopate', sans-serif;
text-transform: uppercase;
background: radial-gradient(circle farthest-corner at center center,
white,
#111) no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<h1>mega<br>fancy</h1>
</body>
</html>
