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

打印页面