CSS 参考手册 目录

CSS3 border-image-repeat 属性

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

语法

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

示例

--- -
  -------------------- ----------------
  ------------------- ---
  ------------------- ---
  -------------------- --
  -------------------- --------
-

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

兼容性

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

总结

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


上一篇:CSS 属性 border-image-outset
下一篇:CSS 属性 border-image-slice