背景起源
此屬性是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區域都有背景圖片的顯示，這裡大家要理解這麼一個區別，可以繪製和開始繪製是兩個概念。
