CSS3背景属性background-origin与background-clip区别与联系
CSS3 包含多个新的背景属性，它们提供了对背景更强大的控制。
先来看看w3c对background-origin与background-clip的定义：
background-origin 属性规定背景图片的定位区域。
background-clip 属性规定背景的绘制区域（其实我个人认为换成裁剪可能更好理解）。
它们的属性值都是border-box、padding-box、content-box.
语法
| background-origin:padding-box\border-box\content-box |
|---|
| 值 | 描述 |
|---|---|
| padding-box | 背景图像相对于 内边距来定位 |
| border-box | 背景图像相对于边框和来定位 |
| content-box | 背景图像相对于内容框来定位 |
| background-clip:padding-box\border-box\content-box |
|---|
| 值 | 描述 |
|---|---|
| border-box | 背景被裁剪到边框盒 |
| padding-box | 背景被裁剪到内边距框 |
| content-box | 背景被裁剪到内容框 |
background-origin 属性只能控制背景图像的表现，不能控制背景色的表现。背景色始终是从元素的边框开始显示。当background-origin的值为content-box时，会让背景图片的左上角和内容框左上角对齐；值为padding-box时，则会让背景图片的左上角和内边距的左上角对齐。值为border-box时，会让背景图片的左上角和边框的左上角对齐。可见background-origin的值的确是决定背景图片开始从哪个区域开始显示。
原图：
border-box：
padding-box（默认值）：
content-box：
background-clip 属性决定的是背景图片被剪切出来显示的部分。当background-clip的值为content-box时，只有content区域的内容看得见，在content之外的图片内容都被隐蔽掉了。值为padding-box时，则在padding之外的图片内容都被隐蔽掉了。
border-box（默认值）：：
padding-box：
content-box：
这两个属性通常可以搭配使用。