CSS - border-image-slice 屬性

此屬性指定如何切片使用border-image-source屬性設定為邊框的影像。

影像被切成九個部分，即四個角、四個邊和一箇中間部分。中間部分是透明的，除非使用了fill關鍵字。

可能的值

數字 − 它表示光柵影像的畫素或向量影像的座標。
百分比 (%) − 它相對於邊框影像的高度和寬度。
fill − 它導致顯示中間部分。
initial − 它將屬性設定為預設值。
inherit − 它從父元素繼承屬性。

應用於

所有HTML元素。

DOM語法

object.style.borderImageSlice = "30%";

示例

以下示例顯示了此屬性的效果：

<html>
<head>
   <style>
   .box {
            width: 200px;
            height: 200px;
            border: 20px solid;
            border-image-source: url(images/border.png);
            border-image-width: 15px;
            border-image-slice: 33%;
            border-image-outset: 8px;
        }
   </style>
</head>
<body>
        <div class="box"></div>
</body>
</html>

列印頁面