Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.