background-origin和background-clip

 background-clip和background-origin都为CSS3新增属性，且它俩的值都为border-box、padding-box和content-box，很容易混淆。

1.background-origin

 我们都知道，background-position 属性用来设置背景图像的起始位置，其默认值为top left，即元素的左上角。可是这个“左上角”是相对于元素的什么位置（border、padding、content）来定位的，却是由属性background-origin决定的，其默认值为padding-box。即默认情况下，背景图像从元素padding的左上角开始渲染。

background-origin的包含：

 padding-box 背景图像相对于内边距框来定位。

 border-box 背景图像相对于边框盒来定位。

 content-box 背景图像相对于内容框来定位。

background-origin的示例如下（示例中所用的背景图片来源于网络）：

background-origin示例图

background-origin示例所对应的的CSS代码如下：

div {

 width: 150px;

 height: 150px;

 margin: 20px;

 background: peachpuff url("imgs/background.jpg") no-repeat;

 border: 10px dashed gray;

 padding: 20px;

 display: inline-block;

}

.border-box-div {

 background-origin: border-box;

}

.padding-box-div {

 background-origin: padding-box;

}

.content-box-div {

 background-origin: content-box;

}

2.background-clip

 background-clip用来规定背景（包含背景图像和背景色）的绘制区域。它定义了对背景进行裁剪的基准位置，在基准位置外的背景将直接被裁剪掉。其默认值为border-box，其值包含：

 padding-box 背景被裁剪到内边距框。

 border-box 背景被裁剪到边框盒。

 content-box 背景被裁剪到内容框。

background-clip的示例如下（示例中所用的背景图片来源于网络）：

background-clip示例图

background-clip示例所对应的的CSS代码为：

div {

 width: 150px;

 height: 150px;

 margin: 20px;

 background: peachpuff url("imgs/background.jpg") no-repeat;

 border: 10px dashed gray;

 padding: 20px;

 display: inline-block;

}

.border-box-div {

 background-clip: border-box;

}

.padding-box-div {

 background-clip: padding-box;

}

.content-box-div {

 background-clip: content-box;

}