CSS | border-image-repeat 属性

CSS中的border-image-repeat属性用于指定如何平铺border-image。它可以为元素的边框提供自定义图像，并指定图像要如何排列以填充边框。

语法

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

• stretch - 默认值。拉伸所有中间部分的边框图像并且重复四个角。
• repeat - 图像平铺以填充边框，边框图像的四个角将被拉伸。
• round - 图像被平铺以填充边框，但可以根据需要缩放。边框图像的四个角将被拉伸。
• space - 图像被平铺以填充边框。边框图像的四个角将被重复。

示例

/* 使用 stretch 属性值 */
border-image-repeat: stretch;

/* 使用 repeat 属性值 */
border-image-repeat: repeat;

/* 使用 round 属性值 */
border-image-repeat: round;

/* 使用 space 属性值 */
border-image-repeat: space;

注意事项

• stretch、space和round属性值的任意一种都可以平铺边框图像。
• 如果没有指定border-image-repeat属性值，则默认为stretch。
• 当使用round值时，边框图像可以缩放，但是不会拉伸到小于原始大小。
• border-image-repeat属性不能与box-sizing属性和border-image-slice属性一起使用。

示例

/* 定义边框图像 */
img {
  border: 20px solid;
  border-image-source: url(border.png);
  border-image-repeat: repeat;
}

该示例将在 img 元素周围创建一个带有20像素宽的边框，并在其中平铺border.png图像。