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: 表示超出内容区域范围的部分将被裁掉. 以下图: