背景起源
此属性是CSS3中新增，虽然当然存在一定的浏览器兼容问题（主要是因为低版本IE浏览器所致），不过随时时间的推移，CSS3将成为主流，下面就结合实例代码详细介绍一下此属性的用法。
语法结构:
background-origin:border-box|padding-box|content-box
参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。
此属性用来规定元素中背景图片开始绘制的位置，当然这个开始绘制的位置和属性值是有关的，下面分别做一下介绍。
一.border-box:
此属性值规定背景图片从border区域开始绘制（包括border），代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-origin属性-php中文网</title>
<style type="text/css">
ul li
{
border:10px dashed green;
width:600px;
height:600px;
padding:10px;
margin-top:10px;
list-style:none;
background-repeat:no-repeat;
}
.border-box
{
background-origin:border-box;
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
}
</style>
</head>
<body>
<ul class="test">
<li class="border-box"></li>
</ul>
</body>
</html>由以上代码可以看出背景图片是从边框开始渲染的，包括边框区域。
二.padding-box：
规定背景图片是从padding开始绘制的，包括padding区域，代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn" />
<title>background-origin属性-php中文网</title>
<style type="text/css">
ul li
{
border:10px dashed green;
width:600px;
height:600px;
padding:10px;
margin-top:10px;
list-style:none;
background-repeat:no-repeat;
}
.padding-box
{
background-origin:padding-box;
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
}
</style>
</head>
<body>
<ul class="test">
<li class="padding-box"></li>
</ul>
</body>
</html>在以上代码中，背景图片是从padding区域开始绘制的。
三.content-box:
此属性值规定，背景图片是从内容区域开始绘制的，所谓内容区域就是出去border和padding区域，代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-origin属性-php中文网</title>
<style type="text/css">
ul li
{
border:10px dashed green;
width:600px;
height:600px;
padding:10px;
margin-top:10px;
list-style:none;
background-repeat:no-repeat;
}
.content-box
{
background-origin:content-box;
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
}
</style>
</head>
<body>
<ul class="test">
<li class="content-box"></li>
</ul>
</body>
</html>以上代码的表现可以看出，背景图片是从内容区域开始绘制的。
有些朋友可能由这样的，既然规定了是从内容区域开始绘制，为什么padding和border区域都有背景图片的显示，这里大家要理解这么一个区别，可以绘制和开始绘制是两个概念。
