The Border-image of CSS3 property

CSS3 border within the scope of Border-radius, box-shadow,border-image three attributes, in addition to some online information on the Border-color attribute of the multilateral box color also to CSS3, but after testing only Firefox support, and to add-moz-private properties, and then go to w3.org, to go through the data, did not find a description of the multi-border color properties, summed up, should be Firefox's own products, not the standard. Next, this article describes the Border-image property of CSS3.

Syntax: border-image: <border-image-source> | | <border-image-slice> [/<border-image-width> |/<border-image-width>/<border-image-outset >]? | | <border-image-repeat>

Related instructions:

Border-image-source:none | <image>

There is no background map by default, and if you set the background map, you specify the background image with an absolute or relative URL address.

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

Cropping this piece is relatively complex, where the parameter number represents the width of the border, no units, specifically pixels; percentage sets the width of the table box as a percentage, and can take 1-4 values relative to the size of the background map, following the rules of T-r-b-l. Fill defaults to NULL, and if it does, the rest of the middle will remain when the picture is cropped. In addition, after the crop is finished, the background map becomes 9 parts, Four Corners, four sides and a center, commonly known as "nine Gongge". Below are 2 graphs to help you understand the content of the cropping section.

Above this picture from the world, it according to the right and left in the order, in turn the background map, cut 4 knives, formed a nine Gongge, and here the Border-image-slice value is 124;

Above (from W3cplus, some of the following figures are also from W3cplus, World and MSDN, no longer allocations) Border-image-slice is the value of a percentage, Top/bottom relative to the height of the background graph, Left/right relative to the length of the background.

After cutting the background, the next step is to draw the drawing of the crop, the background image is divided into 9 parts, as shown in the figure below, where four corners are applied to the 4 corners of the applied element, without stretching, tiling, or repeating effects. The other four (except for the middle 5) apply the arrangement set in the Border-image-repeat.

Next, look at the specific parameters of the arrangement and the application to help understand the applied drawing of the cropped background map.

Border-image-repeat: [Stretch | repeat | round | Space]{1,2}

This property is used to set the arrangement of the background graph, respectively, for extrude, repeat, damper, and Gap tiling (where stretch is the default value.) ), you can take 1-2 values, the first horizontal direction, and the second one in the vertical direction. Here's a couple of graphs to help you understand how the border background picture is arranged.

The referenced background image is (81px*81px, each small circle is 27px*27px)

Tensile effect:

Code:

. box
  width:200px;
  height:50px;
  border:15px solid;
  -webkit-border-image:url ("Border.png") stretch;
  Border-image:url ("Border.png") stretch;

Icon:

Repeat effect:

Code:

. box
  width:200px;
  height:50px;
  border:15px solid;
  -webkit-border-image:url ("Border.png") repeat;
  Border-image:url ("Border.png") repeat;

Icon:

Damper: (tile, stretch the cropped background to try the entire border fill)

Code:

. box
  width:200px;
  height:50px;
  border:15px solid;
  -webkit-border-image:url ("Border.png") round;
  Border-image:url ("Border.png") round;

Icon:

Gap tiling: (tiling, filling the remaining parts with gaps)

Code:

. box
  width:200px;
  height:50px;
  border:15px solid;
  -webkit-border-image:url ("Border.png") space;
  Border-image:url ("Border.png") space;

Icon:

Other than that:

1. The clipping range and arrangement are not specified

Code:

. box
  width:200px;
  height:50px;
  Background: #000;
  border:15px solid red;
  -webkit-border-image:url ("Border.png");
  Border-image:url ("Border.png");

Icon:

2. Vertical and horizontal arrangement in different situations

Code:

. box
  width:200px;
  height:50px;
  Background: #000;
  border:15px solid red;
  -webkit-border-image:url ("Border.png") stretch round;
  Border-image:url ("Border.png") stretch round;

Icon:

From another two examples can be seen, although to border developed a color, but after using the Border-image attribute, border color is not the color set in border, but the background image of the elements of the background color, this needs to be noted.

Border-image-width: [<length> | <percentage> | <number> | Auto]{1,4}

Specify the width/height of the border image by defining an inward offset from the edge of the border image area, noting the difference between this property and Border-width.

Code:

. box
  width:200px;
  height:50px;
  border:54px solid red;
  Border-image:url ("Border.png") 27/27px round;

Icon:

Border-image-outset: [<length> | <number>]{1,4}

Specifies the amount of border image area beyond the border.

Code:

. box
  width:200px;
  height:50px;
  border:54px solid red;
  Border-image:url ("Border.png") 27/15px/10px round;

Icon:

Side