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>

打印页面