CSS3之背景定位原点background-origin


		　　背景定位原点background-origin是CSS3新添加的有关背景的属性，主要是改变背景起始的原点位置的。CSS3之背景定位原点background-origin的属性值有三个：border、padding和content。下面将围绕着三个属性值为大家介绍CSS3之背景定位原点background-origin。
 
　　一、background-origin的语法
 
　　 1、background-origin的语法
[css]  
background-origin: padding-box || border-box || content-box  
 
　　2、background-origin的属性值
　　(1)padding-box:此值为background-origin的默认值，决定background-position起始位置。从padding的外边缘(border的内边缘)开始显示背景图片;
　　(2)border-box:此值决定background-position起始位置从border的外边缘开始显示背景图片;
　　(3)content-box:此值决定background-position起始位置从content的外边缘(padding的内边缘)开始显示背景图片;
 
　　二、background-origin的兼容
 
　　1、background-origin的兼容情况
 
 
　　2、background-origin的兼容写法
[css]  
/*Gecko*/  
-moz-background-origin: padding-box || border-box || content-box;  
/*Webkit*/  
-webkit-background-origin: padding-box || border-box || content-box;  
/*Presto*/  
-o-background-origin: padding-box || border-box || content-box;  
/*W3c标准*/  
background-origin: padding-box || border-box || content-box;  
 
　　三、background-origin的实例(在谷歌浏览器预览效果哟)
 
　　1、padding-box效果
 
　　CSS代码：
[css]  
div {width:200px;height:200px;background:url("http://www.leemagnum.com/img/logo.jpg") no-repeat;border:20px solid rgba(0,0,0,0.3);padding:20px;  
    -webkit-background-origin: padding-box;  
        /*这是默认的位置*/  
}  
 
　　HTML代码：
[html] 
<div></div>  
 
　　预览效果：
 

　　2、border-box效果
 
　　CSS代码：
[css]  
div {width:200px;height:200px;background:url("http://www.leemagnum.com/img/logo.jpg") no-repeat;border:20px solid rgba(0,0,0,0.3);padding:20px;  
    -webkit-background-origin: border-box;  
}  
 
　　HTML代码：
[html]  
<div></div>  
 
　　预览效果：

补充：web前端 , HTML/CSS  ,