DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!
CSS 的 border-image-slice
告诉浏览器在哪里“切片”用于创建元素边框部分的图像。
.element {
border-style: ridge;
border-width: 3rem;
border-image-source: url('path/to/image.jpg');
border-image-slice: 30%;
border-image-repeat: repeat;
}
border-image-slice
属性在 CSS 背景和边框模块级别 3 规范 中定义。
当边框图像被切片时,它被分成九个部分——四个角、四条边和中间——通过在图像上绘制四条无形的切片线,这些线形成类似于网格的区域。属性值将该切片线网格从图像的相应边偏移。
- 区域 1-4 表示四个角区域。
- 区域 5-8 表示四个边区域。
- 区域 9 表示中间区域。
演示
在以下演示中调整 border-image-slice
值,以查看图像在不同长度或百分比下如何偏移。
语法
border-image-slice: [<number [0,∞]> | <percentage [0,∞]>]{1,4} && fill?
- 初始值:
100%
- 应用于:所有元素(包括
::first-letter
伪元素),但当border-collapse
设置为collapse
时,内部表格元素除外。 - 继承:否
- 百分比:相对于源图像的大小
- 计算值:一个到四个值,每个值都是数字或百分比;如果指定,则加上
fill
关键字 - 动画类型:按计算值
border-image-slice
接受一个到四个值,这些值设置边框图像沿每个值对应的边切片的位置。
- 一个值:以相同的偏移距离设置所有四条边——顶部、右侧、底部和左侧。
- 两个值:第一个值设置顶部和底部的偏移量;第二个值设置左侧和右侧的偏移量。
- 三个值:第一个值设置顶部的偏移量;第二个值设置右侧和左侧的偏移量;第三个值设置底部的偏移量。
- 四个值:按顺时针顺序设置每条边的偏移量,从顶部开始——分别为顶部、右侧、左侧和底部。
值
/* Single value */
/* Sets all four sides */
border-image-slice: 20;
border-image-slice: 30%;
/* Two values */
/* top and bottom | right and left */
border-image-slice: 30% 20;
border-image-slice: 10% 30%;
border-image-slice: 20% 10%;
/* Three values */
/* top | left and right | bottom */
border-image-slice: 40 31 11;
border-image-slice: 12 41 15;
border-image-slice: 10% 30% 5%;
/* Four values */
/* top | right | bottom | left */
border-image-slice: 15% 20 10% 10;
border-image-slice: 10 30 40 10;
border-image-slice: 15% 20 10% 40;
/* Optional `fill` value */
border-image-slice: 10 fill;
border-image-slice: 30% 20 fill;
border-image-slice: 40 31 11 fill;
border-image-slice: 10 30 40 10 fill;
/* Global values */
border-image-slice: inherit;
border-image-slice: initial;
border-image-slice: revert;
border-image-slice: revert-layer;
border-image-slice: unset;
number [0,∞]
如果边框图像是栅格图像,则表示从零到无穷大的像素长度值。如果边框图像是基于矢量的图像(例如 SVG)并且没有自然尺寸,则该数字基于矢量坐标。
以下演示是栅格图像的示例,其中 border-image-slice
属性设置为 125
,导致偏移 125px
的切片。
使用长度值时需要牢记以下几点
- 不允许使用负值。
- 大于图像大小的值计算为
100%
。 - 如果左侧和右侧的总和大于图像宽度,则顶部、底部和中间区域将为空白,就像使用透明图像一样。对于顶部和底部值的总和大于图像高度的情况也是如此——左侧、右侧和中间区域将为空白。
percentage [0,∞]
百分比相对于边框图像的大小。例如,当在 200px
正方形图像上设置 border-image-slice: 50%
时,它等于 100px
。
以下演示是 740px
× 493px
栅格图像的示例,其中 border-image-slice
属性设置为 10%
,导致沿顶部和底部的偏移量为 74px
(740px * 10%
),沿左侧和右侧的偏移量为 49.3px
(493px * 10%
)。
fill
(可选)
CSS 的 border-image-slice
属性中的 fill
值就像中间区域的背景图片一样,使用您提供的边框图片填充它。它是一个**可选**值,完全忽略了 border-image-slice
属性可接受的最大值数量限制。这意味着,如果已为顶部、右侧、底部和左侧边框设置了所有四个值,则可以将 fill
作为第五个值来使用边框图片填充元素的中间部分。
.container {
/* top | right | bottom | left | middle */
border-image-slice: 78 65 70 75 fill;
}
而且,我们在声明中放置 fill
的位置根本不重要——任何顺序都可以!
.container {
/* This is valid too! */
border-image-slice: 78 65 fill 70 75;
}
在下面的示例中,fill
关键字用于将边框图片应用于元素的中间区域。
要使 fill
值生效,必须首先在 border-image-slice
属性上至少设置一个值。如果没有设置任何值,中间区域将不会显示任何内容。
浏览器支持
更多信息
- CSS 背景和边框模块级别 3(W3C 规范)
- 理解 border-image(CSS-Tricks)
- 如何使用纯 CSS 添加边框图片和渐变边框(DigitalOcean)