?background-clip和background-origin都為CSS3新增屬性淌喻，且它倆的值都為border-box秸脱、padding-box和content-box罗珍，很容易混淆餐济。
1.background-origin
?我們都知道，background-position 屬性用來(lái)設(shè)置背景圖像的起始位置蓖租，其默認(rèn)值為top left，即元素的左上角羊壹”突拢可是這個(gè)“左上角”是相對(duì)于元素的什么位置（border、padding油猫、content）來(lái)定位的稠茂，卻是由屬性background-origin決定的，其默認(rèn)值為padding-box情妖。即默認(rèn)情況下睬关，背景圖像從元素padding的左上角開(kāi)始渲染。
background-origin的包含：
?padding-box 背景圖像相對(duì)于內(nèi)邊距框來(lái)定位鲫售。
?border-box 背景圖像相對(duì)于邊框盒來(lái)定位共螺。
?content-box 背景圖像相對(duì)于內(nèi)容框來(lái)定位。
background-origin的示例如下（示例中所用的背景圖片來(lái)源于網(wǎng)絡(luò)）：
background-origin示例所對(duì)應(yīng)的的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用來(lái)規(guī)定背景（包含背景圖像和背景色）的繪制區(qū)域情竹。它定義了對(duì)背景進(jìn)行裁剪的基準(zhǔn)位置藐不，在基準(zhǔn)位置外的背景將直接被裁剪掉。其默認(rèn)值為border-box秦效，其值包含：
?padding-box 背景被裁剪到內(nèi)邊距框雏蛮。
?border-box 背景被裁剪到邊框盒。
?content-box 背景被裁剪到內(nèi)容框阱州。
background-clip的示例如下（示例中所用的背景圖片來(lái)源于網(wǎng)絡(luò)）：
background-clip示例所對(duì)應(yīng)的的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;
}
