Home > Article > Web Front-end > How to use border-image-slice attribute

How to use border-image-slice attribute

青灯夜游Original: 2019-02-12 14:48:094250browse

The border-image-slice attribute is used to specify the inward offset of the image border (top, right, bottom, left); there is no specific unit value, you only need to give a simple numerical value or set it as a percentage.

CSS3 border-image-slice attribute

Function: Specifies the image The inward offset of the upper, right, lower and left edges; the border image will be cut into 9 areas: 4 corners, 4 side areas and a middle part, that is, a 9-square grid.

Syntax:

border-image-slice: number|%|fill;

number: Numeric value, representing the pixel (if it is a raster image) or vector coordinate (if it is a vector image) in the 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: Unless the keyword fill is used, the middle image part 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.

CSS3 Example of using the border-image-slice property:

Specify the inward offset of the image border:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style> 
div {
    border: 30px solid transparent;
    border-image: url(&#39;https://img.php.cn/upload/article/000/000/024/5c62637b1a4fe853.png&#39;);
    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 border-image-slice attribute" >
</body>
</html>

Rendering:

How to use border-image-slice attribute

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

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 border-image-repeat attributeNext article：How to use border-image-repeat attribute

See more

How to use border-image-slice attribute

Related articles