CSS border-image-slice 属性值说明
| 值 | 说明 |
|---|---|
| number | 表示光栅图像的边偏移（以像素为单位）和矢量图像的坐标。 |
| % | 以源图像大小的百分比表示边偏移。 |
| fill | 使图像的中间部分显示为背景图像。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
语法
border-image-slice: number | % | fill | initial | inherit;
border-image-slice 属性示例：
<!DOCTYPE html>
<html>
<head>
<style>
.border {
border: 10px solid transparent;
padding: 15px;
border-image: url("/bg.jpg") round;
border-image-slice: 20%;
}
</style>
</head>
<body>
<h2>Border-image-slice example</h2>
<p class="border">Here the border-image-slice is set to 20%.</p>
<p>原始图片：</p>
<img src="/bg.jpg" style="width:50%">
</body>
</html>
使用两个值的另一个示例。
第一个值创建从顶部和底部测量的切片。
第二个创建从左侧和右侧测量的切片。
具有两个值的 border-image-slice 属性示例：
<!DOCTYPE html>
<html>
<head>
<style>
.border {
border: 10px solid transparent;
padding: 15px;
border-image: url("/bg.jpg") round;
border-image-slice: 30 50;
}
</style>
</head>
<body>
<h2>Border-image-slice example</h2>
<p class="border">将border-image-slice设置为 30 ， 50.</p>
<p>原始图片：</p>
<img src="/bg.jpg" style="width:50%">
</body>
</html>
带有 "%" 和 "fill" 值的 border-image-slice 属性示例：
<!DOCTYPE html>
<html>
<head>
<style>
.border {
border: 10px solid transparent;
padding: 15px;
border-image: url("/bg.jpg") round;
border-image-slice: 15% fill;
}
</style>
</head>
<body>
<h2>Border-image-slice example</h2>
<p class="border">将border-image-slice设置为填充15%</p>
<p>原始图片：</p>
<img src="/bg.jpg" style="width:50%">
</body>
</html>
border-image-slice 指定如何将 border-image-source 指定的图像切片为九个区域：四个角、四个边缘、一个中间部分。
“中间”部分是完全透明的，直到设置“填充”值。
它是 CSS3 属性之一。
border-image-slice 属性有三个值：数字、百分比和填充。
该数字表示光栅图像的边缘偏移（以像素为单位）和矢量图像的坐标。
百分比将边缘偏移表示为源图像大小的百分比。
填充使图像的中间部分像背景图像一样显示。
此属性最多可以采用四个值。
不允许使用负值。
如果应用一个值，它将使所有四个切片与它们各自的边距离相同。
如果指定了两个值，第一个值将创建从顶部和底部测量的切片。
第二个创建从左侧和右侧测量的切片。
如果应用三个值，第一个创建从顶部开始测量的切片，第二个从左右开始，第三个从底部开始。
如果指定了四个值，它们会从四个边创建切片。
| 初始值 | 100%. |
|---|---|
| 应用于 | 所有元素。它也适用于::first-letter。 |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSS3 |
| DOM 语法 | object.style.borderImageSlice=“10%”； |
日期：2020-06-02 22:14:18 来源：oir作者：oir