用CSS3 background-clip裁剪背景

用CSS3 background-clip裁剪背景，这个方法应用很多。

* 用于指定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(即内容部分)开始绘制）：

#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 */
}

这个大家可以用下，有时候非常实用。