CSS3 background-clip:border-box|padding-box|content-box|text

浏览器参照基准：Firefox3.6 and Later, Chrome5 and Later, Safari5 and Later, Opera11.50 and Later, IE9.0 and Later

* 用于指定background是否包含content之外的border,padding。默认值为border-box，即background从包含border在内的地方开始渲染，IE的默认表现也等同于border-box

背景裁剪（背景从border(即包括border在内)开始绘制（渲染））：

#background-clip-border{
	-moz-background-clip:border-box;           /* For Firefox */
	-webkit-background-clip:border-box;        /* For Chrome, Safari */
	-o-background-clip:border-box;             /* For Opera */
	-ms-background-clip:border-box;            /* For IE */
	background-clip:border-box;                /* For Future */
}

背景裁剪（背景从padding(即包括padding在内)开始绘制）：

#background-clip-padding{
	-moz-background-clip:padding-box;           /* For Firefox */
	-webkit-background-clip:padding-box;        /* For Chrome, Safari */
	-o-background-clip:padding-box;             /* For Opera */
	-ms-background-clip:padding-box;            /* For IE */
	background-clip:padding-box;                /* For Future */
}

背景裁剪（背景从content(即内容部分)开始绘制）：

* Firefox3.6.7暂不支持从content区域裁剪背景，即暂不支持-moz-background-clip的content-box值

#background-clip-content{
	-moz-background-clip:content-box;           /* For Firefox */
	-webkit-background-clip:content-box;        /* For Chrome, Safari */
	-o-background-clip:content-box;             /* For Opera */
	-ms-background-clip:content-box;            /* For IE */
	background-clip:content-box;                /* For Future */
}

背景裁剪（将背景裁剪作为文本的填充色）：

* 当前只有webkit内核浏览器支持

/* 如果你的浏览器支持text值，你将会看到本段文字的颜色直接使用了背景颜色：红色，且背景将被裁剪掉不再显示 */
#background-clip-text{
	background-color:#f00;
	-webkit-text-fill-color:transparent;
	-webkit-background-clip:text;               /* For Chrome, Safari */
	background-clip:text;                       /* For Future */
}