上一节在《CSS3 background-size》详细的介绍了CSS3为background新增属性之一，今天和大家一起来学习CSS3中有关于Background的第二新属性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元素加上一个样式：

  .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;