border-image-repeat

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2017.

**border-image-repeat** CSS 属性定义了元素的 边框图像 的 边缘区域 和 中间区域 如何调整以适应元素的尺寸。中间区域可以通过在 border-image-slice 属性中使用关键字 “fill” 来显示。

试试看

语法

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

/* top and bottom | left and right */
border-image-repeat: round stretch;

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

border-image-repeat 属性可以使用以下列表中的一个或两个值来指定。

  • 当指定 **一个** 值时，它会对 **所有四边** 应用相同的行为。
  • 当指定 **两个** 值时，第一个值应用于 **顶部、中间和底部**，第二个值应用于 **左侧和右侧**。

Values

stretch

源图像的边缘区域被拉伸以填充每个边框之间的间隙。

repeat

源图像的边缘区域被平铺（重复）以填充每个边框之间的间隙。平铺可能会被剪裁以实现正确的尺寸。

round

源图像的边缘区域被平铺（重复）以填充每个边框之间的间隙。平铺可能会被拉伸以实现正确的尺寸。

space

源图像的边缘区域被平铺（重复）以填充每个边框之间的间隙。额外的空间将分布在平铺之间以实现正确的尺寸。

正式定义

Initial valuestretch
Applies to所有元素，除了当 border-collapse 为 collapse 时内部表格元素。它也应用于 ::first-letter。
Inheritedno
Computed valueas specified
Animation typediscrete

正式语法

border-image-repeat = 
  [ stretch | repeat | round | space ]{1,2}

示例

Repeating border images

CSS

css
#bordered {
  width: 12rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 40px solid;
  border-image: url("border.png") 27;
  border-image-repeat: stretch; /* Can be changed in the live sample */
}

Results

规范

Specification
CSS Backgrounds and Borders Module Level 3
# the-border-image-repeat

浏览器兼容性

BCD tables only load in the browser

另请参阅