语法
border-image-repeat: stretch | repeat | round | initial | inherit;
border-image-repeat 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.border {
border: 10px solid transparent;
padding: 20px;
border-image: url(/bg.jpg) round;
border-image-slice: 100;
border-image-repeat: round;
border-image-width: 10px;
}
</style>
</head>
<body>
<h2>Border-image-slice 属性示例</h2>
<p class="border">border-image-repeat: round;</p>
<p>Here is the oroirnal image used:</p>
<img src="/bg.jpg" style="width:50%">
</body>
</html>
具有 "round" 和 "repeat" 值的 border-image-repeat 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.border1 {
border: 10px solid transparent;
padding: 20px;
border-image: url(/bg.jpg) round;
border-image-slice: 100;
border-image-repeat: round;
border-image-width: 10px;
}
.border2 {
border: 10px solid transparent;
padding: 20px;
border-image: url(/bg.jpg) round;
border-image-slice: 100;
border-image-repeat: repeat;
border-image-width: 10px;
}
</style>
</head>
<body>
<h2>Border-image-repeat 属性示例</h2>
<p class="border1">border-image-repeat: round;</p>
<p class="border2">border-image-repeat: repeat;</p>
<p>Here is the oroirnal image used:</p>
<img src="/bg.jpg" style="width:50%">
</body>
</html>
具有 "space" 和 "stretched" 值的 border-image-repeat 属性示例：
<!DOCTYPE html>
<html>
<head>
<style>
.border1 {
border: 10px solid transparent;
padding: 20px;
border-image: url(/bg.jpg) round;
border-image-slice: 100;
border-image-repeat: space;
border-image-width: 10px;
}
.border2 {
border: 10px solid transparent;
padding: 20px;
border-image: url(/bg.jpg) round;
border-image-slice: 100;
border-image-repeat: stretch;
border-image-width: 10px;
}
</style>
</head>
<body>
<h2>Border-image-repeat 属性示例</h2>
<p class="border1">border-image-repeat: space;</p>
<p class="border2">border-image-repeat: stretch;</p>
<p>Here is the oroirnal image used:</p>
<img src="/bg.jpg" style="width:50%">
</body>
</html>
CSS border-image-repeat 属性值说明
| 值 | 描述 |
|---|---|
| stretch | 每个边界之间的每个间隙都将填充拉伸的图像。这是默认值。 |
| repeat | 每个边界之间的每个间隙都将填充重复的图像。为了达到适当的拟合，可以剪裁重复。 |
| round | 每个边界之间的每个间隙都会用图像重复填充。为了达到适当的配合重复，可以拉伸。 |
| space | 每个边界之间的每个间隙都将填充重复的图像。为了达到适当的拟合另外空间将分布在重复之间。 |
| initial | 将属性设置为默认值。 |
| inherit | 从其父元素继承属性。 |
CSS border-image-repeat 属性用于指定边框图像是圆角、重复还是拉伸。
它是 CSS3 属性之一。
border-image-repeat 属性可以使用一个或者两个值来定义。
如果指定了一个值，它会在所有四个方面应用相同的行为。
如果指定了两个值，第一个应用于顶部和底部，第二个应用于左侧和右侧。
| 初始值 | stretch |
|---|---|
| 应用于 | 所有元素，除了border-collapse 设置为 "collapse"的内部表格元素。。它还适用于::first-letter伪元素。 |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSS3. |
| DOM 语法 | object.style.borderimagerepeat =“round”; |
日期：2020-06-02 22:14:25 来源：oir作者：oir