border-image-slice

Avatar of Sunkanmi Fafowora
Sunkanmi Fafowora

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 属性上至少设置一个值。如果没有设置任何值,中间区域将不会显示任何内容。

浏览器支持

更多信息