css3背景裁切属性background-clip的用法实例详解

css3背景裁切属性background-clip主要是用来决定背景的裁切区域，也就是说，background-clip是规定背景在哪些区域绘制（把多了的背景部分将裁切掉)。默认值为border-box。

语法:
background-clip: border-box | padding-box | content-box;
取值说明：
border-box：背景被裁剪到边框盒。 
padding-box：背景被裁剪到内边距框。 
content-box：背景被裁剪到内容框。

1、如果值为border-box，则背景在元素的边框、补白和内容区域都会显示；

2、如果值为padding-box，则背景只会在补白和内容区域显示；

3、如果值为content-box，则背景只会在内容区域显示。

下面来看具体的示例，在看示例之前，我们先看一下background-color和background-image的显示区域。

css：

.ui-bg{
     width: 290px; 
     height: 178px; 
     border-radius: 5px; 
     border:10px solid rgba(0,0,0,0.4); 
     margin: 10px;
}
.ui-bg-color{
     background:#f60;      
}
.ui-bg-image{
       background:url(/demo/source/origin.png) no-repeat; 
}

<div class="ui-bg ui-bg-color"></div>
<div class="ui-bg ui-bg-image"></div>

他们效果分别如下：

我们的边框样式是透明的，从上图中可以看出background-color，从元素的边框左上角边缘到边框右下角边缘，把整个元素都铺满了.

我们的边框样式是透明的，从上图中可以看出background-image，是从元素的padding左上角到边框边缘的右下角。

下面再来看background-clip的示例

html:

<div class="clip-bg clip-0">
   <p>我是内容区域,250px*138px</p>
</div>

<div class="clip-bg clip-1">
  <p>我是内容区域250px*138px</p>
</div>
<div class="clip-bg clip-2">
   <p>我是内容区域250px*138px</p>
</div>
<div class="clip-bg clip-3">
   <p>我是内容区域250px*138px</p>
</div>

.clip-bg{
   width: 250px;
   height: 138px; 
   border-radius: 5px; 
   border:10px solid rgba(0,0,0,0.3); 
   padding: 20px;
   background:#f60 url(/demo/source/origin.png) no-repeat; 
   margin: 10px;
}
.clip-bg p{
  height: 138px;
  background: rgba(0,0,0,0.5); 
  color: #fff; 
  font-weight: 600; 
  font-size: 18px;
}
.clip-0{
  -webkit-background-clip: border-box;
  -moz-background-clip: border-box;
  background-clip: border-box;
}
 .clip-1{
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding-box;
  background-clip: padding-box;
}
.clip-2{
  -webkit-background-clip: content-box;
  -moz-background-clip: content-box;
  background-clip: content-box;
}
.clip-3{
  -webkit-background-clip: text;
  -webkit-text-fill-color:transparent;
}
.clip-3 p{
    font-size: 30px;
    font-weight: 600;
}

1、background-clip：border-box

从图中可以看出，因为background-clip默认的值就是border-box，所以取值为border-box时，跟有没有设置background-clip都一样的。

2、background-clip：padding-box

当值为padding-box时，从图中可以看出，只要超过padding的部分就被裁切掉了，不显示出来了。大家可以仔细看效果图，真的是一刀裁切掉多余的部分。

3、background-clip：content-box

当值为content-box时，从图中可以看出，只要超过content区域的部分就被裁切掉了，不显示出来了。

4、background-clip：text

从图中可以看出，当值为text，能实现用背景图片来填充文本的效果，不过目前只有Safari和Chrome支持。