CSS3中background-origin和background-clip的区别

• background-origin:to determine how the background-position of a background in a certain box is calculated.
• background-clip:to determine whether the backgrounds extends into the border or not.

用通俗一点的话说，其实就是：

• background-origin：用来确定背景从哪里开始描绘
• background-clip：用来确定背景从哪里开始显示（其实从origin和clip的字面意思也可以感受出来，clip是剪切嘛），背景可以延伸到哪。

它们的取值都有三个：border-box | padding-box | content-box, 其中background-origin的默认值是padding-box,background-clip的默认值是border-box。

以下的例子应该能更直白地表现它们的区别：

先写一个

<div class='box'>

</div>

然后添加简单的样式：

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

}