CSS 属性

CSS border-image-slice属性指定如何使用属性 border-image-source 对设置为边框的图像进行切片。

图像被切成九个部分，即四个角、四个边缘和一个中间部分。中间部分是透明的，除非使用 fill 关键字。

属性值

  • number: 它表示光栅图像或坐标的像素对于矢量图像。

  • 百分比 (%): 相对于边框图像的高度和宽度。

  • fill: 它导致中间部分的显示。

  • initial: 它设置属性的默认值。

  • inherit - 它从父元素继承属性。

适用范围

所有 HTML 元素。

DOM 语法

object.style.borderImageSlice = "30%";

示例

这里是显示此属性效果的示例 -

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