背景剪切 html,用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 */

}

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