border-image-slice属性用于指定图像边框（顶部、右侧、底部、左侧）的向内偏移；没有具体的单位值，只需要给一个单纯的数字值或者按照百分比设置。
CSS3 border-image-slice属性
作用：规定图像的上、右、下、左侧边缘的向内偏移；会把边框图像切成9个区域：4个角、4边区域和一个中间部位，即一个9宫格。
语法：
border-image-slice: number|%|fill;
number ：数字值，代表图像中像素（如果是光栅图像）或矢量坐标（如果是矢量图像）。
%：相对于图像尺寸的百分比值：图像的宽度影响水平偏移，高度影响垂直偏移。
fill：保留边框图像的中间部分。
说明：除非使用了关键词 fill，否则中间的图像部分会被丢弃。如果省略第四个数值/百分比，则与第二个值相同。如果省略第三个值，则与第一个值相同。如果省略第二个值，则与第一个值相同。
CSS3 border-image-slice属性的使用示例：
指定图像边框的向内偏移：
<!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>效果图：
Atas ialah kandungan terperinci border-image-slice属性怎么用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
tutorial css3
Apakah sifat kecerunan css3?
Bagaimana untuk mengunci skrin pada oppo11
kata putus baris paksa
tekan sebarang kekunci untuk memulakan semula
Apakah yang perlu saya lakukan jika eDonkey Search tidak dapat menyambung ke pelayan?
Apakah kaedah untuk mengesan kelemahan ASP?
pemapar gambar windows tidak boleh memaparkan daripada memori
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
