CSS - border-image-repeat 属性_CSS 菜鸟教程

此属性指定边框图像是重复的、圆角的、间隔的还是拉伸的。默认值为 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>

<< CSS - border-image-outset 属性 CSS - border-image-slice 属性 >>