CSS3 -- 背景裁剪（background-clip）
浏览数：28 /
时间：2015年06月09日
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
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
