border-image-repeat

Avatar of Sunkanmi Fafowora
Sunkanmi Fafowora

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费信用额度!

CSS border-image-repeat 属性控制边框图像如何重复以填充元素的外边缘。 当 border-image-slice 设置为 fill 时,它还可以控制元素背景的中心。

.container {
  border-style: ridge;
  border-width: 3rem;
  border-image-source: url('path/to/image.jpg');
  border-image-slice: 70; 
  border-image-repeat: repeat;
}

border-image-repeat 属性在 CSS 背景和边框模块级别 3 规范 中定义。

语法

border-image-repeat: stretch | repeat | round | space
  • 初始值: stretch
  • 适用于: 所有元素(包括 ::first-letter 伪元素),除了当 border-collapse 设置为 collapse 时内部表格元素。
  • 继承:
  • 百分比: 不适用
  • 计算值: 两个关键字,每个轴一个
  • 动画类型: 离散

/* Keyword values */
border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: space;

/* Multiple value syntax */
border-image-repeat: stretch repeat;
border-image-repeat: stretch round;
border-image-repeat: stretch space;

border-image-repeat: round stretch;
border-image-repeat: round repeat;
border-image-repeat: round space;

border-image-repeat: repeat stretch;
border-image-repeat: repeat round;
border-image-repeat: repeat space;

border-image-repeat: space stretch;
border-image-repeat: space round;
border-image-repeat: space repeat;

/* Global values */
border-image-repeat: inherit;
border-image-repeat: initial;
border-image-repeat: revert;
border-image-repeat: revert-layer;
border-image-repeat: unset;

stretch

这是默认值。 它会拉伸图像以填充边框区域。

repeat

此值会以平铺的方式重复边框图像以填充边框区域。 如果平铺到达没有更多空间放置完整平铺的位置,则该平铺可能会被裁剪以正确填充剩余空间,以防止出现间隙。

round

repeat 一样,此值会重复并拉伸图像以填充所有边框侧边。 但与 repeat 不同,round 值会重新缩放图像以防止出现间隙,而不是裁剪平铺。

space

与其他值一样,space 会以平铺的方式重复边框图像以填充边框区域。 如果剩下空间,space 会将空间分配到平铺周围以填充整个区域,而不是裁剪和拉伸平铺,或重新缩放图像。

一些背景

我们可以设置一个图像作为元素的边框

.element {
  border-image-source: url("/path/to/image.webp");
}

这不会执行任何操作,因为我们还没有实际设置边框的宽度和样式,所以让我们来做一下

.element {
  border: 2.5rem solid; /* shorthand for `border-width` and `border-style` */
  border-image-source: url("/path/to/image.webp");
}

我们不必设置 border-color,但如果边框图像文件因某种原因无法加载,最好将其设置为回退。

这会使用我们提供的图像文件绘制边框(这是我们在示例中使用的文件)。

我们为边框的所有方向生成了图像。 问题是,我们没有提供任何关于如何使用该图像填充可用空间的说明。 但首先,我们可以使用 border-image-slice 来“切片”图像。 它会分成九个部分——四个角、四个边和中心。

The borders of the top, left, right, bottom, and middle parts of an element.

边框图像切片后,平铺会定位,而 border-image-repeat: stretch(默认值)会接管并拉伸整个图像以填充我们为边框绘制的所有可用空间。

现在我们可以明确声明 border-image-repeat 并使用我们介绍的任何值来设置它。

使用两个重复值绘制边框图像

因此,border-image-repeat 最多可以接受两个值。 当我们使用两个值语法时,第一个关键字设置水平方向(顶部和底部边框边缘)的缩放和平铺。 它还可以设置 border-image-slice 设置为 fill 时的中间区域。

The borders of the top, bottom, and middle parts of an element.

两个值语法中的第二个关键字设置垂直方向(左侧和右侧边框边缘)的缩放和平铺,以及 border-image-slice 设置为 fill 时的中间图像。

The borders of the left, right, and middle parts of an element.

官方规范非常出色地概述了使用两个值语法重复边框图像时发生的处理过程。 我们将在这里逐字复制它

  • 如果第一个关键字是 stretch则顶部、中间和底部图像会进一步缩放,使其宽度与边框图像区域的中间部分一样宽。 高度不会进一步更改。
  • 如果第一个关键字是 round则顶部、中间和底部图像的宽度会调整大小,以便在 border-image 区域的中间部分正好放置完整数量的图像,就像 background-repeat 属性中的 round 一样。
  • 如果第一个关键字是 repeat space则顶部、中间和底部图像不会进一步更改。

浏览器支持

更多信息