此属性指定边框图像是重复的、圆角的、间隔的还是拉伸的。默认值为 stretched。
可能的值
- stretch - 它使图像竖立以填充边界区域。这是默认值。
- repeat - 它重复图像以填充该区域。
- round - 它导致图像（瓦片）重复以填充该区域，如果整个图像没有填充，则图像将被重新缩放。
- space - 它导致图像（瓦片）的重复以填充该区域，如果整个图像没有填充，则多余的空间将分布在瓦片周围。
- initial − 它设置属性的默认值。
- inherit - 它从父元素继承属性。
适用于
所有 HTML 元素。
DOM 语法
object.style.borderImageRepeat = "repeat|space|round|stretch";
例
以下示例显示了此属性的效果 -
<html>
<head>
<style>
.box1 {
border: 20px solid;
border-image-source: url(images/border.png);
border-image-slice: 33%;
border-image-repeat: stretch ;
}
.box2 {
border: 20px solid;
border-image-source: url(images/border.png);
border-image-slice: 33%;
border-image-repeat: repeat;
}
.box3 {
border: 20px solid;
border-image-source: url(images/border.png);
border-image-slice: 33%;
border-image-repeat: round;
}
.box4 {
border: 20px solid;
border-image-source: url(images/border.png);
border-image-slice: 33%;
border-image-repeat: space;
}
</style>
</head>
<body>
<p class="box1">border-image-repeat with value stretch</p>
<p class="box2">border-image-repeat with value repeat</p>
<p class="box3">border-image-repeat with value round</p>
<p class="box4">border-image-repeat with value space</p>
</body>
</html>
