Home > Article > Web Front-end > How to use border-image-repeat attribute

How to use border-image-repeat attribute

青灯夜游Original: 2019-02-12 14:23:293960browse

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(&#39;https://img.php.cn/upload/article/000/000/024/5c62637b1a4fe853.png&#39;);
    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:

How to use border-image-repeat attribute

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use CSS3 border-image-outset property?Next article：How to use CSS3 border-image-outset property?

See more

How to use border-image-repeat attribute

Related articles