How to use the border-image-repeat attribute in css
Editor to share with you how to use the border-image-repeat attribute in css, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!
CSS3border-image-repeat attribute
Function: specifies whether the image frame should be repeated (repeated), stretched (stretched), or paved (rounded).
Syntax:
Border-image-repeat:stretch | repeat | round | space
Stretch: indicates that the image is stretched to fill the area
Repeat: indicates that the image is tiled (repeated) to fill the area.
Round: similar to the repeat value; if all images cannot be tiled completely, the image is scaled to fit the region.
Space: similar to the repeat value. If all images cannot be tiled completely, the extended space will be distributed around the image.
Description: the border-image-repeat property specifies how to extend and lay out the edges and middle parts of a border image. Therefore, you can specify two values. If the second value is omitted, the same value is taken as the first value.
Note: the border-image-repeat attribute is not supported for InternetExplorer10,Opera12 and Safari5.
An example of using the CSS3border-image-repeat attribute
Div {
Margin:50px
Border:30pxsolidtransparent
Border-image:url ('https://img.php.cn/upload/article/000/000/024/5c62637b1a4fe853.png');
Border-image-slice:25
}
.round {
Border-image-repeat:round
}
.repeat {
Border-image-repeat:repeat
}
.stretc {
Border-image-repeat:stretc
}
DIV uses an image frame-- round
DIV uses an image frame-- repeat
DIV uses an image frame-- stretc
The above is all the content of the article "how to use the border-image-repeat attribute in css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
