Home > Article > Web Front-end > How to use css border-image-width property
How to use css border-image-width property
- 青灯夜游Original
- 2019-05-30 16:43:493117browse
css border-image-width property is used to specify the width of the image border. You can set 4 values (not negative) to divide the border image into nine parts. They represent distances inward from the top, right, bottom, and left of the area.
How to use the css border-image-width property?
border-image-width attribute specifies the width of the image border.
Syntax:
border-image-width: number|%|auto;
Attribute value:
number: Represents the multiple of the corresponding border-width
%: The size of the bounding image area: the area of the width of the horizontal offset, the area of the height of the vertical offset
auto: If specified, the width is the intrinsic width or height of the corresponding image-slice.
Note:
The 4 values of the border-image-width attribute specify the border image to be divided into nine parts. They represent distances inward from the top, right, bottom, and left of the area.
If the fourth value 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. No negative values are allowed as border-image-width values.
css border-image-width property example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div {
border: 30px solid transparent;
border-image: url('https://img.php.cn/upload/article/000/000/024/5c62637b1a4fe853.png');
border-image-width: auto;
border-image-repeat: round;
border-image-slice: 30;
}
</style>
</head>
<body>
<div>DIV 使用图像边框</div>
<p>使用的图片:</p>
<img src="https://img.php.cn/upload/article/000/000/024/5c62637b1a4fe853.png" alt="How to use css border-image-width property" >
</body>
</html>Rendering:
The above is the detailed content of How to use css border-image-width property. For more information, please follow other related articles on the PHP Chinese website!