CSS3 border-image-repeat 属性

CSS3 border-image-repeat 属性定义了用于边框图像的平铺方式。可以使用一些关键字和属性值作为背景图像的平铺方式。它是用于定义元素边界的图像，其支持图像的翻转和平铺。边框图像可以完全或部分地替代边框样式，使得网页设计可以更加灵活和美观。

语法

border-image-repeat: value;

属性值

CSS3 border-image-repeat 属性包括下列值：

stretch（默认）

将背景图像伸展来铺满整个边界

border-image-repeat: stretch;

repeat

在边框内连续平铺背景图像

border-image-repeat: repeat;

round

平铺背景图像，并将其调整到尺寸合适

border-image-repeat: round;

space

平铺背景图像并调整其与边界的间隔

border-image-repeat: space;

示例

在下面示例中，我们定义一个类名为border-image，它的边框用到了一张图片，图片被设为铺满整个边界。同时，根据值不同，我们可以看到其对应的效果。

.border-image {
  border-width: 20px;
  border-style: solid;
  border-image-source: url(border.png);
  
  /*不同的 repeat 值*/
  border-image-repeat: stretch;
  /*border-image-repeat: repeat;*/
  /*border-image-repeat: round;*/
  /*border-image-repeat: space;*/
}

总结

CSS3 border-image-repeat 属性提供了四种平铺方式，可以让网页设计者更加灵活的来设置元素边界的图像。不同的平铺方式可以在视觉上产生不同的效果，应该根据实际需求来选择合适的值。值得注意的是，如果边框宽度很粗，图片中的图案也会被边框留白三分之一的距离。