css3中一些小知识点

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

css3中一些小知识点

原文：http://www.cnblogs.com/cara-front-end/p/5209075.html