Home > Article > Web Front-end > How to use css border-image-slice property
How to use css border-image-slice property
- 青灯夜游Original
- 2019-05-30 11:26:432938browse
css border-image-slice property is used to specify the inward offset of the image border (top, right, bottom, left). The image will be divided into nine areas: four corners, four sides and a middle area. Unless the fill keyword is used, the middle portion of the image is discarded.
How to use the css border-image-slice property?
The border-image-slice attribute specifies the inward offset of the image border.
Syntax:
border-image-slice: number|%|fill;
Attribute value:
● Number: Numeric value, representing the pixels in the image (if it is a raster image) or vector coordinates (in the case of a vector image).
● %: Percentage value relative to the image size: the width of the image affects the horizontal offset, and the height affects the vertical offset.
● Fill: Keep the middle part of the border image.
Note:
This attribute specifies the inward offset of the upper, right, lower, and left edges of the image. The image is divided into nine regions: four corners, four sides and a middle area. Unless the fill keyword is used, the middle portion of the image is 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.
css border-image-slice 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-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">
</body>
</html>
The above is the detailed content of How to use css border-image-slice property. For more information, please follow other related articles on the PHP Chinese website!