CSS3 Border Picture

CSS3 Border Picture

With the Border-image property of CSS3, You can use a picture to create a border: border-image is used instead of border-style, that is, the size of the border depends.
And there is no border-shadow on the side of the Border-image. haha, they Clash. Note that Border-image does not occupy the page position (he is out of document Flow!!!) ）。

- principle of implementation
- parameter Resolution
-- Photo section Border-image-slice
-- border picture width border-image-width
-- border picture outer convex border-image-outset
-- border picture repeat Border-image-repeat

Principle

first, the target image is cut into 9 parts,
Figure 1
, and replace the middle one (ordinal 9) with the contents of the target Element.

Parameter resolution

Border-image-sourse

The initial value is none, and the box border will apply the Border-style value;
If you want to set a picture of an external link address come in:

.boder {       border:54px solid #000;       border-image-source:url("../../upload/image/picture.png");//引入图片作为border       width: 200px;       height: 200px;       }

Picture Slicing Border-image-slice

Eg:border-image-slice:10 20 30 40; Line Line 1 is 10, line Line 2 is 20, line Line 3 is 30, line Line 4 is 40.
That is to say, Border-image-sourse introduced a picture to be cut in order to be placed as Border. Set Border-image-slice:10 20 30 40; for the picture as shown in the picture to 4 knife, the picture is cut into 9 pieces. (figure 1, Area 1 is determined by the cutting line 1,4, Area 2 is determined by the cutting line, area 3 is determined by the cutting line 2,3, Area 4 is determined by the cutting line 3,4, The area 5 is determined by the cutting line 1,2,4, The area 6 is determined by the cutting line, area 7 by the cutting line 2,3,4, area 8 by the cutting line 1 3,4 decision, Area 9 up to the cutting line 1,2,3,4)
This is the baby to try to come out with the force of the primitive!

Border picture width border-image-width

The border width of the box that is equivalent to the element itself Border-width. If Border-image-width is specified, the border-width is invalid, and if not specified, the width of the picture border is fixed by border-width.

That is, he controls the size of the picture around the Element.
There is a point to be affirmed Here. Border-image-slice is used to control the original image processing, the size is relative to the Original. The border-image-width is the zoom of the image when it is placed to the element four weeks after the original cut is Finished.
After the cut is finished, People's Pictures are like this:
then, after setting the border-image-width, it is Stretched.
That is, the size of the image we see so far (only set slice and Width) is first cut out by cutting line 1,2,3,4 and then stretched by border-image-slice.

Border picture outer convex border-image-outset

Allows the border background to extend outside the box. Border-image-width is the size of the control box Border. Look at the Picture:

  . Boder{Border: solid #000;      Border-image-source: URL (".. /.. /upload/image/picture.png ");      Border-image-width:-px;      Border-image-slice:   (a);      Border-image-outset: + px;//border picture outset is set to 20px, then the background map will extend 20px from the outer edge of the box to the bottom right and left.       width: + px;      Height: + px;}

Border Picture Repeat Border-image-repeat

The effect is to let the border background is repeated, the default value is stretch, is the meaning of stretching, 4 Corners 4 regions to do horizontal and vertical stretching, to fill the gap of the border; repeat is to make 4 corners 4 areas of the horizontal and vertical copy of the image, do the CTRL + V movement, Fill the gap between the borders, while round[surround] is to divide 4 corners and 4 areas into equal areas, and then use the background image cut to fill the entire border gap, can not be more or less, just right. (this is the copy of the great god, but the specific source really do not remember, sorry! ）

Stretch

In order to see clearly, the next picture I will put two identical, but there is a shadow in the form of the Border-image Scope.
Stretch is the meaning of stretching, 4 corner 4 regions to do horizontal and vertical stretching, to fill the gap of the border, but four angle 1,2,3,4 height and width at the same time to do the same scale, and four areas 5,6,7,8 each to do one-direction stretching.

 . Boder { Border:solid #000  ; border-image-source:url (".. /.. /upload/image/picture.png ") ; border-image-width:px ; border-image-slice:     ; border-image-repeat:stretch ; width: px ; Height: + px ;}

Repeat

Repeat is to let 4 corner 4 regions to finish the horizontal and vertical copy of the image, do the CTRL + V movement, The border between the gaps filled;

. Boder { Border:px solid #000  ; border-image-source:url (".. /.. /upload/image/picture.png ") ; border-image-slice: ; border-image-repeat: repeat ; width: px ; Height: + px ;}

！

The size of the border four horns is 27*27 (by border-width:27px), and the size of the four corners of the picture is also 27*27 (by border-image-slice:27;). So we see Four corners of the picture is Normal. But up and down Thursday edge due to the original picture four area size of 27*27, while border-width four areas for 27* (100-27*2) (element width:100px;height:100px;) so, Four areas do repeat Processing.

Round

And round[surround] is the 4 corner and 4 areas into an equal area, and then use the background image cut to fill the entire border gap, can not be more or less, just right.

. Boder { Border:px solid #000  ; border-image-source:url (".. /.. /upload/image/picture.png ") ; border-image-slice: ; border-image-repeat: repeat ; width: px ; Height: + px ;}

Round will automatically adjust the size of the image to the size of the slice operation on the basis of scaling, the full display of the border Picture.
Repeat simple tile redundant parts, will not be the size of the picture in the slice operation on the basis of scaling, the picture will be "cut" and not full display.

CSS3 Border Picture