CSS3 -- 背景裁剪（background-clip）

一、background-clip 语法、取值

　　CSS3属性 backround-clip，主要用来肯定背景的裁剪区域，（即如何控制元素背景显示区域）。

background-clip ： border-box || padding-box || content-box

　　==》border-box：此值为默认值，背景从border区域向外裁剪，也就是超出部分将被裁剪掉；

　　==》padding-box：背景从padding区域向外裁剪，超过padding区域的背景将被裁剪掉；

　　==》context-box：背景从content区域向外裁剪，超过context区域的背景将被裁剪掉；

二、background-clip 兼容

　注意：background-clip在Mozilla下分得特别的细；

　　　　Mozilla内核（如Firefox）在3.6版本如下不支持border-box;padding-box;content-box的语法规则。

==》Firefox3.6版本如下（包含3.6版本）：
  　-moz-background-clip: border || padding   /* Gecko 1.2-1.9.2 (Firefox 1.0-3.6) */

==》Firefox4.0版本以上：
　　支持border-box,padding-box,content-box；并没有需前缀。
　　若是加上“-moz”，则在Firefox4.0+版本反而是一种错误的写法。
  　background-clip:  border-box || padding-box || content-box /*Firefox 4.0+ (Gecko)*/

提示：详细的你们能够到Mozilla.org查看background-clip | -moz-background-clip。虽然网上介绍Opera在9.6+版本就支持-o-background-clip属性的使用，但实际上是存在bug的，直到Opera11才正式支持。

 

三、background-clip 用法

兼容各浏览器的正确写法：
/*Firefox3.6-*/
-moz-background-clip: border || padding;
/*Webkit*/
-webkit-background-clip: border-box || padding-box || context-box;

-o-background-clip：border-box || padding-box || context-box;

/*W3C标准 IE9+ and Firefox4.0+*/
background-clip: border-box || padding-box || context-box;

 

四、background-clip 实例：请点击查看  http://www.w3cplus.com/content/css3-background-clip

 

整理自：（W3CPlus）CSS3 background-clip