The border-image-repeat attribute is used to specify whether the image border should be repeated, stretched, or rounded.
CSS3 border-image-repeat attribute
Function: Specifies the image Whether the border should be repeated, stretched, or rounded.
Syntax:
border-image-repeat: stretch|repeat|round|space;
stretch: means stretching the image to fill the area
repeat: means tile (repeat) the image to fill the area.
round: Similar to the repeat value; if the image cannot be completely tiled, the image is scaled to fit the area.
space: similar to repeat value. If all images cannot be completely tiled, the expansion space will be distributed around the image
Description: The border-image-repeat attribute specifies how to extend and lay out the edges and middle of the border image. Therefore, you can specify two values. If the second value is omitted, the same value as the first is taken.
Note: Internet Explorer 10, Opera 12 and Safari 5 do not support the border-image-repeat attribute.
CSS3 border-image-repeat property usage example
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin:50px;
border: 30px solid transparent;
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;
}
</style>
</head>
<body>
<div class="round">
DIV 使用图像边框--round
</div>
<div class="repeat">
DIV 使用图像边框--repeat
</div>
<div class="stretc">
DIV 使用图像边框--stretc
</div>
</body>
</html>Rendering:
Reference for this article: https://www.html.cn/book/css/properties/border/border-image-repeat.htm
The above is the detailed content of How to use border-image-repeat attribute. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
