How to use the border-image-repeat attribute in CSS3

This article mainly introduces how to use the border-image-repeat attribute in CSS3. It is very detailed and has a certain reference value. Friends who are interested must finish it!

Set how to repeat the image:

Div {

Border-image-source: url (border.png)

Border-image-repeat: repeat

}

The border-image-repeat property is used to determine whether image boundaries should be repeated (repeated), stretched (stretch), or rounded (image).

CSS syntax

Border-image-repeat: stretch | repeat | round | initial | inherit

Note: this property specifies how to extend and lay out the edges and middle parts of the border image. Therefore, you can specify two values. If the second value is omitted, the same value is taken as the first value.

Attribute value

1.stretch default value. Stretch the image to fill the area

2.repeat tile (repeated) the image to fill the area.

3.round is similar to the repeat value. If all images cannot be tiled completely, the image is scaled to fit the area.

4.initial sets this property to the default value. View initial

5.inherit inherits this attribute from the parent element.

The above is all the content of the article "how to use the border-image-repeat attribute in CSS3". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!