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