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