How to use the border-image-slice attribute in css

This article mainly shows you "how to use the border-image-slice attribute in css", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use the border-image-slice attribute in css" this article.

CSS3border-image-slice attribute

Function: specify the inward offset of the upper, right, lower, and left edges of the image; the frame image will be cut into 9 regions: 4 corners, 4 sides, and a middle part, that is, a 9 grid.

Syntax:

Border-image-slice:number |% | fill

Number: a numeric value that represents pixels in the image (if it is a raster image) or vector coordinates (if it is a vector image).

%: percentage value relative to image size: the width of the image affects the horizontal offset and the height affects the vertical offset.

Fill: preserves the middle part of the border image.

Note: unless the keyword fill is used, the middle part of the image will be discarded. If the fourth value / percentage is omitted, it is the same as the second value. If the third value is omitted, it is the same as the first value. If the second value is omitted, it is the same as the first value.

Examples of the use of the CSS3border-image-slice attribute:

Specify the inward offset of the image frame:

Div {

Border:30pxsolidtransparent

Border-image:url ('https://img.php.cn/upload/article/000/000/024/5c62637b1a4fe853.png');

Border-image-repeat:round

Border-image-slice:30

}

DIV uses image frames

Pictures used:

The above is all the content of the article "how to use the border-image-slice 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!