CSS3 Background-clip

CSS3中的Background-clip属性，其主要是用来确定背景的裁剪区域，换句话说，就是如何控制元素背景显示区域。首先来看其语法：

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

取值说明：

1、border-box:此值为默认值，背景从border区域向外裁剪，也就是超出部分将被裁剪掉；

2、padding-box：背景从padding区域向外裁剪，超过padding区域的背景将被裁剪掉；

3、context-box：背景从content区域向外裁剪，超过context区域的背景将被裁剪掉；

形象一点的可以参照下图的layout所示：

不知道大家没有深入的去了解Box Model中background部分，background在Box Model中，他是布满整个元素的Box区域的，并不是从padding内部开始，只不过边框部分遮住了部分background，但有一点需要注意，background-color是从元素的边框左上角起到右下角止，而background-image却不一样，他是从padding边缘的左上角起而到border的右下角边缘止，如果大家对上面那句话不太好理解的话，我们一起来看一个简单的Box Model加上边框和背景色，背景图片的示意图：

<div class="demo"></div>

 .demo {
     width: 220px;
     height: 115px;
     padding: 20px;
     border: 20px dashed rgba(255,0,0,0.8);
     background: green url("../images/box-shadow-img.png") no-repeat;
     font-size: 16px;
     font-weight: bold;
     color: red;
   }

下面的效果就更清晰的说明了上面那句话：

但如何能让他们在统一的位置显示呢？那就是今天所要介绍的background-clip，这个属性就会让背景色和背景图片统一在相同的位置，前面也简单说过，background-clip会根据不同的属性值进行裁剪多了的背景部分。那么background-clip有哪些浏览器能支持呢？详细的先来看下面图：

background-clip和background-size一样，在各种浏览器内核下，都具有自己的私有前缀。

为了更好区分他们之间不同之处，先创建一个共同的demo，demo的HTML代码：

DEMO一、background-clip:border-box

 .borderBox {
	-moz-background-clip: border;
	-webkit-background-clip: border-box;
	-o-background-clip: border-box;
	background-clip: border-box;
   }

效果：

从效果图中可以看出，background-clip取值为border-box时，跟没有设置background-clip效果是完全一样的，那是因为background-clip的默认值为border-box。

DEMO二、background-clip:padding-box

在上面的基础上稍微做一下修改，把刚才的border-box换成padding-box值，看看会有什么变化？

.paddingBox {
     -moz-background-clip: padding;
     -webkit-background-clip: padding-box;
     -o-background-clip: padding-box;
     background-clip: padding-box;
   }

效果：

此时效果就与原来默认下有明显的区别了，图上可以得知，只要超过padding边缘的背景都被裁剪掉了，此时的裁剪并不是让背景成比例裁剪，而是直接将超过padding边缘的背景剪切掉。

DEMO三、background-clip:content-box

按同样的方法，大家一起来测试background-clip中的content-box效果

 .contentBox {
	-webkit-background-clip: content-box;
	-o-background-clip: content-box;
	background-clip: content-box;
    }

效果：

明显背景只在内容区域显示，超过内容边缘的背景直接被裁剪掉了。需要说明一点：content-box在Firefox3.6版以下不被支持。

DEMO四、background-clip:text

上面主要介绍了background-clip各个属性值的运用与效果，而webkit下background-clip还有一个更神奇的效果，就是可以让图片填充文本，那就是background-clip:text配合其私有属性-webkit-text-fill-color: transparent,下面大家一起来见正这个神奇：

 .text {
      font-size: 40px;
      text-transform: uppercase;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
   }

效果：

最后，给大家一个Facebook案例效果：

.facebook {
	background: #3B5A98;
	border: 20px solid rgba(134,134,134,0.8);
	padding: 10px;
	color: #fff;
	text-align: center;
	width: 150px;
	height: 65px;
	line-height: 65px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	font: bold 25px Airal;
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	-o-background-clip: padding-box;
	background-clip: padding-box;
   }