CSS properties – border – image

Border-image is a shorthand attribute for adding a background image to the border of an element:

Border-image is displayed as a picture instead of border-style, so if border-style is set to None, border-image will not be displayed.

border-image-source

border-image-source: none|image;
Copy the code

This property is the address of the configuration background, which defaults to None and has no effect.

border-image-slice

border-image-slice: number|%|fill;
Copy the code

This is the key attribute we use. It can be set to a value or percentage. The value refers to pixels, the percentage to the image position, the width of the image affects the horizontal offset, and the height affects the vertical offset, but you can’t use units like PX and EM.

The function of this attribute is also very obvious, that is, to do cutting, specify the upper, right, lower and left edges of the image inward offset, image segmentation, the four values of the specified background image segmentation into nine grids. Of course, you can use 1-4 values to represent the same meaning as margin and padding. One value represents all, two values represent up and down and left and right, and three values represent up, left and right and down.

This fill value indicates whether to leave the middle of the border image.

As you can see from the image below, you cut from the top, then from the right, then from the bottom, and finally from the left, creating nine areas, or nine squares.

You can set different values to see where you cut.

border-image-slice: 30% 35% 40% 25%;
Copy the code

From the code and effects, here’s how to display fill:

border-image-source: url(circle-point.png); Border - image - slice: 33.34% fill;Copy the code

border-image-source: url(circle-point.png); Border - image - slice: 33.34%;Copy the code

border-image-width

border-image-width: length|number|%|auto;
Copy the code

Set the image width of the border to 1. Default is 1. If we set this property separately, we can determine the border width of the image without affecting the structure of the element.

This property can use units such as px and em, and can also be set to 1-4 values.

border-image-outset

border-image-outset: length|number;
Copy the code

This property allows the border background to extend out of the box.

In simple terms, you can change the position of the background border without affecting the DOM structure. You can set multiple values, like margin and padding. In addition to using units such as px and em, you can also use a numeric value representing a multiple of the border-width.

The following is the effect when set to 1:

border-image-repeat

border-image-repeat: stretch|repeat|round|space;
Copy the code

This attribute is used to set the border-image tiling mode and can receive 1-2 parameters. If no parameter is set, the default value “stretch” is used. If two parameters are used, the first one is specified in the horizontal direction and the second one is specified in the vertical direction. And you can also see that the middle region is also affected by these two parameters.

As can be seen from the renderings, repeat, round and space are tiling effects, and stretch is stretching effect.

The tiling of repeat is not to stretch, that is, to fill the border gap.

The round will scale the image to show it fully, so it will stretch it a little bit.

Space is tiled by dynamically adjusting the picture spacing based on the border size.

The differences are evident in the renderings below.