CSS3 border-image-repeat 属性

border-image-repeat 属性用于指定边框图片的重复方式。边框图片是通过 border-image-source 属性定义的。

语法

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

• stretch：默认值，边框图片将被拉伸以填充整个边框。
• repeat：边框图片将被重复平铺以填充整个边框。
• round：边框图片将被拉伸或压缩以填充整个边框，同时保持图片的比例不变。
• space：边框图片将被等距重复平铺以填充整个边框，如果最后一个图片不能完整显示，则会留有空白。

示例

div {
  border-image-source: url(border.png);
  border-image-slice: 30;
  border-image-width: 10;
  border-image-outset: 5;
  border-image-repeat: stretch;
}

在上面的示例中，我们定义了一个 div 元素的边框图片，设置了 border-image-repeat 属性为 stretch，表示边框图片会被拉伸以填充整个边框。

兼容性

border-image-repeat 属性的兼容性良好，主流浏览器均支持。

总结

border-image-repeat 属性用于指定边框图片的重复方式，可以根据需要选择不同的取值来实现不同的效果。