CSS3--Picture border (Border-image)

1, border-image description, grammar

　　Before CSS3, border can simply set some solid colors or several simple linetypes (such as solid,dotted,double,dashed , etc.).

In CSS3 ,border-image implements a different picture effect for the border.

< Image > <  Number > < percentage > < Border-width > {1,4}]? [Stretch | repeat | round] {0,2}

Tip: Border-image properties are not decomposed in real-world applications

 CSS3 border-image parameters:1, none: is the default value of Border-image, if the value is none, the border has no background picture; 2,<Image>: Set the background image of Border-image, this is the same as background-image , use absolute or relative URL address, to specify the background image; 3 .< Number>: Number is a numeric value, used to set the width of the border, the unit is PX, in fact, like border-width value, you can use the 1~4 value, which specifically represents the value of four azimuth, we can refer to the Border-width setting way; 4 .<Percntage>: Percntage is also used to set the width of the border, unlike number, which uses a percentage value to set the width of the border, 5, Stretch,repeat,round: Used to set the border background picture of the placement method, Similar to Background-position, where stretch is stretched ( Default Value ), repeat is duplicated, round is tiled. 

Reference: border-image:< ' Border-image-source ' > | | < ' border-image-slice ' > [/< ' border-image-width ';] | | < ' border-image-repeat ' >

==>Border-image-slice (used to decompose the incoming background image)

　　 border-image-slice: [ <number> | <percentage>]{1,4}&& fill?

Value: Support:<number> | <percentage>;

Where number is no unit, specifically Pixel PX, because its default unit is pixel px, so in the use of number does not need to add units, if the addition of units is the wrong way of writing.

Percentage percent value to indicate that the percentage value is relative to the border background picture , for example, the size of the border picture is 300px*240px, we take a percentage of 25% 30% 15% 20%, Then they actually have the effect of cutting the image of 60px 90px 36px 60px four-sided size. such as

As shown in: The number or percentage in Border-image-slice is preferable to 1~4 values , and is a rule that follows Top,right,bottom,left.

Border-image-slice:fill , literally, is padding, and if you use this keyword, the middle part of the picture boundary will remain. By default, it is empty.

==>border-image-repeat (used to specify how the Border-image is arranged)

This property setting parameter is not the same as the other,Border-image-repeat does not follow the top,right,bottom,left orientation principle , he only accepts two (or one) parameter values, the first one represents the horizontal direction, the second represents the vertical direction When the value is a value, the horizontal and vertical directions are arranged in the same way. At the same time its default value is stretch, if you omit the value, then the horizontal and vertical direction are arranged in stretch.

2, Border-image compatible

More compatibility scenarios:

3. Border-image Usage

/*mozilla kernel firefox*/-moz-border-image:<' Border-image-source'>||<' Border-image-slice'>[ /<' Border-image-width'>] ||<' Border-image-repeat'>/*webkit kernel Safari and chrome*/-webkit-border-image:<' Border-image-source'>||<' Border-image-slice'>[ /<' Border-image-width'>] ||<' Border-image-repeat'>/*opera*/-oborder-image:<' Border-image-source'>||<' Border-image-slice'>[ /<' Border-image-width'>] ||<' Border-image-repeat'>/*W3C Standard */border-image:<' Border-image-source'>||<' Border-image-slice'>[ /<' Border-image-width'>] ||<' Border-image-repeat'>

Example: Nine Gongge

(Take the picture to the four-knife cut, cut into nine parts, and then re-decorate like background-image.) According to its 1~4 parameters, similar to the border-width of the azimuth rules, and then the cut to the image redistribution to them. ）

Display effect Area: 1, 2, 3, 4, 6, 7, 8, 9

No display area:5 (blind zone)

-webkit-border-image:url (".. /images/border.png ") Round Stretch;-moz-border-image:url (". /images/border.png ") round stretch;
-o-border-image:url (".. /images/border.png ") Round Stretch;border-image:url (". /images/border.png ") round stretch;

4. More examples: CSS3 border-image

organized from: (w3cplus) CSS3 border-image

CSS3--Picture border (Border-image)