HTML | DOM 样式 borderImageRepeat 属性

简介

borderImageRepeat 属性规定了边框图像如何平铺以填充元素的边框。

borderImageRepeat 属性是用在 border-image 属性中的，当使用边框图像时，一个元素的边框可以从图像中提取，而无需指定边框的样式。

语法

border-image-repeat: stretch|repeat|round|initial|inherit;

属性值

| 值 | 描述 | | --- | --- | | stretch | 默认值。拉伸以适应边框。 | | repeat | 平铺以填充边框，如果需要的话，则尽可能重复。 | | round | 如果必要，平铺以填充边框，但是保持边框图像的比例完整。 | | initial | 设置该属性为默认值。 | | inherit | 从父元素继承该属性。|

示例

border-image: url(border.png) 30 30 round;
border-image-repeat: round;

兼容性

| Chrome | IE | Firefox | Safari | Opera | | --- | --- | --- | --- | --- | | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |

在所有主流浏览器中都支持 border-image-repeat 属性。

总结

border-image-repeat 属性对于制作更加复杂的边框风格有很大的帮助，可以实现更加个性化的样式。在使用该属性时，需要清楚该属性值的含义，以及如何与 border-image 属性搭配使用，避免出现不必要的问题。