background-clip 和 background-origin

下面都是我本身的理解, 若是有不對的地方, 還請你們幫忙指出.
下面是在 chrome 瀏覽器上測試的

background-clip 和 background-origin

先說說background-image

background-image 默認的起始位置是 padding 外邊緣的左上角. 以下圖所示:

可是注意: 默認的結束位置倒是 border 外邊緣的右下角, 以下圖所示:

若是想讓起始位置變爲 border 外邊緣的左上角, 或者內容區域的左上角, 這時就是 background-origin 發揮做用的時候了.

background-origin

它的做用就是改變 background-image 左上角的起始位置.

它有三個值:

• padding-box: 這是它的默認值, 指定 background-image 的左上角是 padding 外邊緣的左上角.

• border-box: 指定 background-image 的左上角是 border 外邊緣的左上角.

• content-box: 指定 background-image 的左上角是 內容區域 的左上角.

background-clip

它的做用是指定 background-color 和 background-image 的做用範圍.

它也有三個值, 和 background-origin 同樣的值.

• border-box: 這是它的默認值, 表示超出 border 外邊緣的部分將被裁掉. 以下圖:

• padding-box: 表示超出 padding 外邊緣的部分將被裁掉. 以下圖:

• content-box: 表示超出內容區域範圍的部分將被裁掉. 以下圖: