HTML - DOM樣式物件borderImageSlice屬性

HTML DOM 樣式物件borderImageSlice屬性指定影像邊框的內側偏移量。其預設值為100%。

語法

以下是獲取或設定borderImageSlice屬性的語法。

設定borderImageSlice屬性

object.style.borderImageSlice= "number | percentage | fill | initial | inherit";

獲取borderImageSlice屬性

object.style.borderImageSlice;

屬性值

值	描述
數字	表示影像中的畫素或向量座標（如果為向量影像）。
百分比	與影像大小相關。表示相對於影像大小的水平影像寬度和垂直偏移量。
fill	保留邊框影像的中間部分。
initial	用於將此屬性設定為其預設值。
inherit	用於繼承其父元素的屬性。

返回值

它返回一個字串值，表示元素的邊框影像切片屬性。

HTML DOM 樣式物件“borderImageSlice”屬性示例

以下示例說明如何新增、更改或獲取邊框影像切片屬性。

新增和設定邊框影像切片屬性

在這個例子中，我們實現了三個值，它們使用長度、百分比和fill進行切片。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object borderImageSlice Property
    </title>
    <style>
        #slice {
            border: 20px solid transparent;
            margin: 20px;
            border-image: url("/images/blockchain.png") 30 round;
        }
    </style>
</head>
<body>
    <p>Click to change</p>
    <button onclick="fun()">
        Change Using Number
    </button>
    <button onclick="funTwo()">
        Change Using Percentage
    </button>
    <button onclick="funThree()">Fill</button>
    <br><br><br>
    <p id="slice">
        This is a sample paragraph containing some 
        text. This paragraph is created only for example.
    </p>
    <script>
        function fun() {
            document.getElementById("slice")
                .style.borderImageSlice = "20";
        }
        function funTwo() {
            document.getElementById("slice")
                .style.borderImageSlice = "20% 40%";
        }
        function funThree() {
            document.getElementById("slice")
                .style.borderImageSlice = "fill";
        }
    </script>
</body>
</html>

獲取邊框影像切片屬性

以下示例獲取應用的邊框影像切片屬性。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object borderImageSlice Property
    </title>
    <style>
        #slice {
            border: 20px solid transparent;
            margin: 20px;
            border-image: url("/images/blockchain.png") 30 round;
        }
    </style>
</head>
<body>
    <p>Click to change</p>
    <button onclick="fun()">
        Change Using Number
    </button>
    <button onclick="funTwo()">
        Change Using Percentage
    </button>
    <button onclick="funThree()">Fill</button>
    <br><br><br>
    <p id="slice">
        This is a sample paragraph containing some 
        text. This paragraph is created only for example.
    </p>
    <p id="ex"></p>
    <script>
        function fun() {
            let x=document.getElementById("slice")
                .style.borderImageSlice = "20";
            document.getElementById("ex").innerHTML=x;
        }
        function funTwo() {
            let x=document.getElementById("slice")
                .style.borderImageSlice = "20% 40%";
            document.getElementById("ex").innerHTML=x;
        }
        function funThree() {
            let x=document.getElementById("slice")
                .style.borderImageSlice = "fill";
            document.getElementById("ex").innerHTML=x;
        }
    </script>
</body>
</html>

支援的瀏覽器

屬性
borderImageSlice	是 15	是 12	是 15	是 6	是 15

html_dom_style_object_reference.htm

列印頁面