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

列印頁面