css3之background-clip与background-origin的区别

background-clip	规定背景的绘制区域。	3
background-origin	规定背景图片的定位区域。	3
background-size	规定背景图片的尺寸。	3

background-origin与background-clip的区别：

• background-origin:eg:如果是 padding 值，则 position 相对于 padding 边缘（"0 0" 为 padding 边缘的左上角，而 "100% 100%" 为右下角）。

• background-clip:

   

不同浏览器下：

background-clip:

• background-clip:border-box;

　　ie7:ie8:chrome：firefox：

　　因为ie9+才支持此属性所以ie7\ie8无论background-clip:border-box/padding-box/content-box;都是这种样子

• background-clip:padding-box/content-box在chrome、firefox、ie9及以上浏览器都呈现效果统一，所以不再截图

background-origin:

• border-box:在chrome、firefox、ie9及以上浏览器呈现效果统一

• padding-box:

• content-box:

background-origin与background-clip一起用时

• background-clip:content-box;
  background-origin:padding-box;

  

• 只写background-origin:padding-box;时

background-clip 默认类似于 background-clip:border。
background-origin 默认类似于 background-origin:padding。

注：如若喜欢，欢迎转载，请在文章页面明显位置给出此文链接！
若您觉得这篇文章还不错请点击下右下角的推荐，有了您的支持才能激发作者更大的写作热情，非常感谢！