background-clip属性和background-origin一样，都是用于背景定位的。不同的是background-origin定位的是背景图片，而background-clip定位的是背景颜色。

background-clip属性有两个取值，分别是：border-box和padding-box。当取值border-box的时候，背景颜色的定位开始于border的左上角；当取值padding-box的时候，背景颜色的定位开始于padding的左上角。

和background-orgin一样，除IE以外，background-clip支持目前大部分的主流浏览器。同样，他们还是要加上各自私有的前缀。

看下面两个例子，它们的background-orgin取值为content-box，background-clip取值分别为border-box和padding-box：

背景颜色（灰色）开始于border。

背景颜色（灰色）开始于padding。

第一个例子的代码：

.p{
	width:150px;
	height:100px;
	padding:10px;
	border:10px dashed #cad5eb;
	background:#f0f3f9 url(http://jayuh.com/wp-content/uploads/2010/10/background.jpg) no-	repeat;
	-moz-background-origin:content;
	-webkit-background-origin:content;
	-moz-background-clip:border;
	-webkit-background-clip:border;
	text-shadow:1px 1px #ccc
	color:black;
}

PS:本文例子不支持RSS，因为RSS把CSS忽略了。如想看本文的例子，请打开原文地址。