Border-image replaces the style defined in border-style by specifying an image, but the border-image takes effect only if: Both border-style and border-width are valid values (that is, border-style is not none and border-width is not 0).

1, image resources (border-image-source)

border-image: none | <image>
Copy the code

The background image of the border-image is called using the URL (). The image can be a relative path or an absolute path, or no image can be used. Border-image :none; None indicates that border-image does not have any effect and the border uses the style specified in border-style.

2, image clipping position (border-image-slice)

Bordre - image - slice [< number > | < percentage >] {1, 4} && fill?Copy the code

Border-image-slice: border image slice Specify 4 values (4 lines: top, right, bottom, left) to split the border-image-source into 9 grids as follows:

Border – image – slice four lines of value types are: number | percentage

  • There is no unit, the default unit is pixel (px). For example, border-image:url(border-.png) 27 repeat; 27 means 27px.
  • Percentage values are supported. The percentage value is relative to the size of the border image. Assuming the border image is 400px by 300px, the actual effect of 20% is to crop the image 60px 80px 60px 80px.

For a simple example, as mentioned earlier, percentage widths are supported, so the “30%, 35%, 40%, 30%” suggestion can be represented in the following figure:

Keyword: Fill is to take the slice in the middle of the border-image-source grid as the background of the DOM node. PNG:

.box {
    width: 27px;
    height:27px;
    border: 27px solid;
    border-image: url(box.png) 27 27 27 27 fill repeat stretch;
}
Copy the code

Border-image-width (border-image-width)

Border - image - width: [< length > | < percentage > | < number > | auto] {1, 4}Copy the code

Border – image – width literally frame image width, holds the DOM node split into scratchable latex. Assume that the nine-grid of border-image-slice segmentation border-image-source is A, and the nine-grid of border-image-width segmentation DOM is B, and there is A one-to-one correspondence between A and each grid of B, as follows:

There are four types of the border-image-width parameter:

  • Length with px, em, in… The size value of the unit
  • Percentage with percentage
  • Number Number without a unit; It represents a multiple of border-width
  • If auto is used, border-image-width will use the border-image-slice value

Note:

  • The parameter of border-image-width cannot be negative
  • The default value of border-image-width is number type: 1

4. Repeat (border-image-repeat)

Border - image - repeat: [stretch | repeat | round | space] {1, 2}Copy the code

Border-image-repeat literally means border image tiling. The border-image tiling function specifies the border-image tiling mode. A maximum of two parameters can be accepted syntactically. The first parameter specifies the tile mode of the horizontal border and the second parameter specifies the tile mode of the vertical border. The middle area of the nine grid is affected by both parameters as follows:

Note:

  • Difference between round and repeat: Round fills (moderately stretched). Repeat does not stretch, does not round.
  • The difference between round and space: Although round is a rounded fill display, space has a certain amount of space between the squares.

5, border-image-outset

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

Border-image-outset extends the original map position outward

.box { margin: 0 auto; width: 81px; height: 81px; Border: 27 px solid rgba (, 0, 0, 1); border-image-source: url(//misc.aotu.io/leeenx/border-image/box.png); border-image-slice: 27 27 27 27; border-image-repeat: repeat; } .outset { border-image-outset: 27px; }Copy the code



Note:

  • The value of border-image-outset cannot be negative

6. Border image area

The area used to draw the border image is called the border Image area, which by default overlaps exactly with the border box. In other words, the border image area is the nine squares separated by the border-image-width.

6.1 Relationship between border-box and border image area

As mentioned above, the border image area is overlapped with the border-box by default. If the standard is backward to the development stage, in the development stage, DOM nodes are divided into nine grids by border-width, and the border-box in this stage is the border image area. In the mature stage (that is, the version introduced in this chapter), border-box and border image area are the two Spaces overlapped by default. Border-box is only responsible for transactions on the box model, while border image area focuses on border image space segmentation.

6.2 Can the border-width split the border image area?

In actual use, it is found that the border-width can also split the border image area. As follows:

.box { margin: 0 auto; width: 27px; height: 27px; Border: 27 px solid rgba (242181,78, 3); border-image-source: url(http://7xv39r.com1.z0.glb.clouddn.com/box.png); border-image-slice: 27 27 27 27 fill; border-image-repeat: stretch stretch; }Copy the code

.box { margin: 0 auto; width: 27px; height: 27px; Border: 27 px solid rgba (242181,78, 3); border-image-source: url(http://7xv39r.com1.z0.glb.clouddn.com/box.png); border-image-slice: 27 27 27 27 fill; border-image-outset: 10px; border-image-repeat: stretch stretch; }Copy the code

7, abbreviation: border-image

border-image: < 'border - image - source > | | < >' border - image - slice '[/ <' border - image - width > | / < 'border - image - width >? / < 'border - image - outset >]? | | < > 'border - image - repeat'Copy the code

As the parameters for border-image-slice, border-image-width and border-image-outset are similar, it is important to note the following:

  • The output of the following parameter must be set after the width of the border-image-outset. If the width of the border-image-width defaults, the output of the following parameter must be set after the width of the border-image-outset.
border-image: url(http://7xv39r.com1.z0.glb.clouddn.com/box.png) 27 27 27 27 / / 10px;
Copy the code
  • If there is a value of border-image-width/ border-image-outset, the value of border-image-slice must be specified as follows:
border-image: url(http://7xv39r.com1.z0.glb.clouddn.com/box.png) 27 27 27 27 / 10px / 10px;
Copy the code

8. Reference Materials:

CSS3 border-image Clear