CSS3 Tutorial: Background-clip and Background-origin

Original: Http://www.planabc.net/2008/04/14/background-clip_background-origin/background-clip and Background-origin are CSS3 The background module attribute in the new, used to determine the positioning of the background. Background-clip is used to determine whether background contains border areas. and background-or
Original: http://www.planabc.net/2008/04/14/background-clip_background-origin/
Background-clip and Background-origin are the newly added background module attributes in CSS3 to determine the positioning of the background.
Background-clip is used to determine whether background contains border areas. The Background-origin is used to determine the reference position of the background-position calculation.
The syntax is:Background-clip: [Border | padding] [, [Border | padding]]* background-origin: [border | padding | content] [, [Border | p adding | content]]*

for Background-clip：
If it is a padding value, background ignores the padding edge and border is transparent. If the value is border, background includes the border area. If there are multiple background-image pictures, the corresponding background-clip values are separated by commas.
for Background-origin：
If the value is padding, the position is relative to the padding edge ("0 0" is the upper-left corner of the padding edge, and "100% 100%" is the lower-right corner). If it is a border value, it means a relative border edge. The border value is relative to the edge of the content. As with Background-clip, multiple values are separated by commas. If Background-clip is a padding value, Background-origin is a border value, and Background-position is "top left" (the default initial value), the upper-right corner of the background map will be truncated.
These two properties only appear from CSS3, and what about the default behavior in background module without using the attribute?
Background-clip default is similar to Background-clip:border.
Background-origin default is similar to Background-origin:padding.
But IE is a special case (It sucks).
In IE6, IE7, the background of the general element (except button, etc.) is equivalent to: background-clip:border; Background-origin:border;
and the Haslayout element (plus button, etc.) background is equivalent to: background-clip:padding; background-origin:padding;
This pair of CSS3 properties has been implemented in browsers such as Mozilla, Safari 3 and Konqueror, but is expressed through their private properties.
References:
The private properties of the basic non-IE browser will generally start with-xxx-,-o-is the Presto-engine Opera private,-icab-is icab private,-khtml-is a khtml engine browser (such as Konqueror S Afari),-moz-is a browser (such as Firefox,mozilla) with Mozilla Gecko as the engine, and-webkit-is a browser (such as Safari, Swift) that webkit the rendering engine (which is Khtml's derivative product).
That is, the supported private properties are: Moz-background-clip webkit-background-clip khtml-background-clip Moz-background-origin Webkit-background-origin Khtml-background-origin