How to use css border-image-repeat property-Front-end Q&A-php.cn

How to use css border-image-repeat property

青灯夜游

Release： 2019-05-30 10:13:40

Original

2591 people have browsed it

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 css border-image-repeat property

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;

Copy after login

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>

Copy after login

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!