css3 background-clip和background-origin

浏览器支持：



这里的支持是指:允许开发人员修改该属性， background-clip和和background-origin 属性特征从css2规范开始就已经存在(IE6+支持特性，但是不支持开发者修改，IE8开始支持)

css2规范:  background-clip为padding-box即从内补白开始

css2.1~css3规范:background-clip为border-box

background-origin 属性规定 background-position 属性相对于什么位置来定位，只限定开始位置，不限定结束位置，结束位置总是覆盖border

background-clip 属性规定背景的绘制区域，限定开始位置和结束位置，IE8和background-origin：padding-box;效果一样，IE7-效果为padding-box

注意:

background-clip属性对于background-images
和background-color的处理并不一致

background-images永远都是从padding开始

 
*如果设置了repeat或者是没有设置no-repeat的时候同时background-clip为border-box的时候，边框的背景会重复但是并不是和padding内的图片为一个repeat序列

 
*如果设置了no-repeat同时background-clip为border-box，开始位置边框
top left直接没有图片

background-color的开始可以很好的受到background-clip限制

如果希望background-images冲边框开始最好用background-origin:border-box;而不是background-origin:border-box;

background-clip


谷歌浏览器&&IE9+:






IE8:



IE7:



background-origin:

谷歌浏览器&&IE9+,div添加了30px padding





IE8下失效，效果如图2