Home >Web Front-end >Front-end Q&A >How to use css border-image-repeat property

How to use css border-image-repeat property

青灯夜游Original: 2019-05-30 10:13:402622browse

css border-image-repeat property is used to specify whether the image border should be repeated (repeated), stretched (stretched) or covered (rounded). This property specifies how to stretch and lay out the edges and center of the border image. Therefore, you can specify two values. If the second value is omitted, the same value as the first is taken.

How to use the css border-image-repeat attribute?

The border-image-repeat attribute specifies whether the image border should be repeated, stretched, or rounded.

Syntax:

border-image-repeat: stretch|repeat|round|space;

Attribute value:

##● stretch: Stretch the image to fill the area

●　repeat: Tile (repeat) the image to fill the area.

● round: similar to repeat value. If all images cannot be completely tiled, the images are scaled to fit the area.

● Space: similar to repeat value. If the entire image cannot be completely tiled, the expansion space will be distributed around the image

Description:This property 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.

css border-image-repeat property example

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    background-color: lightgrey;
    border: 30px solid transparent;
    border-image: url(&#39;border.png&#39;);
    border-image-slice: 30;
    border-image-repeat: repeat;
}
</style>
</head>
<body>
<div>
 DIV 使用图像边框。
</div>
<p>使用的图片:</p>
<img  src="border.png" alt="How to use css border-image-repeat property" >
</body>
</html>

Rendering:

How to use css border-image-repeat property

The above is the detailed content of How to use css border-image-repeat property. For more information, please follow other related articles on the PHP Chinese website!

css safari border

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 css text-decoration-style attributeNext article：How to use css text-decoration-style attribute

See more

How to use css border-image-repeat property

Related articles