博主解除未用属性后进行总结复习，介绍了background-origin属性，其有border-box、padding-box、content-box三个属性值，表明background-position的定位参考，还可用于精灵图定位与剪切，同时提到background-clip属性也有相同三个属性值，规定背景绘制区域。
今天解除了几个曾经没有用到的属性，所以想总结并且复习一下。
background-origin属性：有三个属性值，分别是border-box，padding-box，content-box。看到border-box是不是联想到了CSS3中的盒子模型。
box-sizing:border-box。它是为了减少CSS中的盒模型padding和border值计算的繁琐。
首先先说一下：
background-origin属性：它表示 background-position 属性相对于什么位置来定位。
属性值border-box:背景图像相对于边框盒来定位。
属性值padding-box：背景图像相对于内边距框来定位。
属性值content-box：背景图像相对于内容框来定位。
所以我们一般用这个属性做一些精灵图的定位与剪切。
还需要了解的是 background-clip属性：同样也有三个属性值border-box，padding-box，content-box。
background-clip属性规定背景的绘制区域。
| 值 | 描述 |
|---|---|
| border-box | 背景被裁剪到边框盒。 |
| padding-box | 背景被裁剪到内边距框。 |
| content-box | 背景被裁剪到内容框。 |
扫一扫
124
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
