用通俗一点的话说，其实就是：
它们的取值都有三个：border-box | padding-box | content-box, 其中background-origin的默认值是padding-box,background-clip的默认值是border-box。
以下的例子应该能更直白地表现它们的区别：
先写一个
然后添加简单的样式：
立即学习“前端免费学习笔记（深入）”；
.box{ width:450px; height:300px; background-image: url('http://a4.att.hudong.com/40/03/16300001203327135349034613246.jpg'); background-repeat:no-repeat; background-size: 400px 240px; border: 30px dashed #458B74; background-color:#B9D3EE; padding:20px;} 显示的效果如下：
这里其实也可以看出background-origin和background-clip的默认取值分别为padding-box和border-box。
当添加以下几组代码时，可看到不同的效果：
A-------------------------------------------------------------------------------------------
.box{ background-origin:border-box; background-clip:border-box;} 这里可以看到，背景图片从border就开始绘制，显示也从border开始，因此效果如上。
B--------------------------------------------------------------------------------------------
.box{ background-origin:border-box; background-clip:padding-box;} 绘制还是从border开始，但是显示是从padding开始，因此显示如上。
c--------------------------------------------------------------------------------------------
.box{ background-origin:content-box; background-clip:border-box;} 绘制从content开始，显示从border开始。
D--------------------------------------------------------------------------------------------
当然如果绘制从border开始，显示从content开始，效果就是下面的效果了。
.box{ background-origin:border-box; background-clip:content-box;}
