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

1、background-clip 语法、取值

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

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

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

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

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

2、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才正式支持。

3、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;

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

整理自：（W3CPlus）CSS3 background-clip