CSS3--Background clipping (background-clip)

1, background-clip syntax, value

　　The CSS3 property Backround-clip is used primarily to determine the clipping area of the background (that is, how to control the element background display area).

Background-clip:border-box | | Padding-box | | Content-box

　　= = "Border-box: This value is the default value, the background is clipped from the border area, that is, the outside portion will be clipped out;

　　= = " Padding-box: The background is cropped from the padding area, and the background beyond the padding area is clipped;

　　= = " Context-box: The background is cropped out from the content area, and the background beyond the context will be clipped;

2, Background-clip compatible

　Note: Background-clip in the Mozilla under the special sub-fine;

The Mozilla kernel (such as Firefox) does not support Border-box;padding-box;content-box syntax rules under version 3.6.

= = " Firefox3.6 version (with 3.6 version):  -moz-background-clip:border | | padding/   * Gecko 1.2-1.9.2 (Firefox 1.0-3.6) */
= = " Firefox4.0 version above: Support Border-box,padding-box,content-box, and no prefix required.
If you add "-moz", the firefox4.0+ version is the wrong way to do it.  background-clip:  border-box | | padding-box | | content-box/*firefox 4.0+ (Gecko) * *
Hint: detailed everyone can go to mozilla.org view Background-clip | -moz-background-clip. Although the online introduction of opera in the 9.6+ version of the support for the use of-o-background-clip attributes, but in fact there is a bug, until OPERA11 officially supported.

3. Background-clip Usage

compatible with the correct wording of each browser :
/*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 standard ie9+ and Firefox4.0+*/background-clip:border-box | | Padding-box | | Context-box;

4. Background-clip instance: Please click to view Http://www.w3cplus.com/content/css3-background-clip

Organized from:(w3cplus) CSS3 Background-clip

CSS3--Background clipping (background-clip)