HTML - DOM Style 对象 borderImageRepeat 属性

HTML DOM Style 对象 **borderImageRepeat** 属性设置或返回图像边框是否应为圆形、重复或拉伸。其默认值为 stretch。

语法

以下是获取或设置 borderImageRepeat 属性的语法。

设置 borderImageRepeat 属性

object.style.borderImageRepeat= "stretch | repeat | round | space | initial | inherit";

获取 borderImageRepeat 属性

object.style.borderImageRepeat;

属性值

值	描述
stretch	使图像拉伸以填充区域
repeat	重复图像以填充区域。
round	重复图像以填充区域。如果不能用整数倍填充区域，则调整图像大小。
space	重复图像以填充区域。如果不能用整数倍填充区域，则将额外的空间分配到图块之间。
initial	用于将此属性设置为其默认值。
inherit	用于继承其父元素的属性。

返回值

它返回一个字符串值，表示元素的图像边框重复属性。

HTML DOM Style 对象“borderImageRepeat”属性的示例

以下示例说明了 borderImageRepeat 属性的不同属性值的实现。

添加边框图像重复属性

以下示例将边框图像重复属性添加到 round，然后将 borderImageRepeat 属性设置为 stretch 和 round。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object borderImageRepeat Property
    </title>
    <style>
        #repeat {
            border: 20px solid transparent;
            margin: 20px;
            border-image: url("/images/blockchain.png") 30 round;
        }
    </style>
</head>
<body>
    <p>Click to change repeat style</p>
    <button onclick="fun()">Stretch</button>
    <button onclick="funTwo()">Round</button>
    <br><br><br>
    <p id="repeat">
        This is a sample paragraph containing some text. This
        paragraph is created only for the sake of this example.
    </p>
    <script>
        function fun() {
            document.getElementById("repeat")
                .style.borderImageRepeat = "stretch";
        }
        function funTwo() {
            document.getElementById("repeat")
                .style.borderImageRepeat = "round";
        }
    </script>
</body>
</html>

将边框图像重复设置为“repeat”和“space”

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object borderImageRepeat Property
    </title>
    <style>
        #repeat {
            border: 20px solid transparent;
            margin: 20px;
            border-image: url("/images/blockchain.png") 30 round;
        }
    </style>
</head>
<body>
    <p>Click to change repeat style</p>
    <button onclick="fun()">Repeat</button>
    <button onclick="funTwo()">Space</button>
    <br><br><br>
    <p id="repeat">
        This is a sample paragraph containing some text. This
        paragraph is created only for the sake of this example.
    </p>
    <script>
        function fun() {
            document.getElementById("repeat")
                .style.borderImageRepeat = "repeat";
        }
        function funTwo() {
            document.getElementById("repeat")
                .style.borderImageRepeat = "space";
        }
    </script>
</body>
</html>

支持的浏览器

属性
borderImageRepeat	是 15	是 12	是 15	是 6	是 15

html_dom_style_object_reference.htm

打印页面