HTML | DOM 样式 borderImageSlice 属性介绍

1. 概述

borderImageSlice 属性定义了如何切片图像以创建一系列边框的九个部分，这样可以根据图像的尺寸和自定义的外观来创建复杂的边框。

该属性只适用于使用 border-image 的元素，即使用该元素添加自定义边框。

2. 语法

object.style.borderImageSlice="number|%|fill|width"

其中：

• number：数字，表示切片线相对于图像边框左侧的距离（单位px）。
• %：百分比，表示切片线相对于图像边框左侧的距离（单位%）。
• fill：auto | [fill]，表示分隔线不被放置的区域的填充方式。
• width：数字，表示边框宽度。

多个值之间用空格分隔。

3. 实例

3.1 切片线距离

div {
  border-image-slice: 10 20 30 40;
}

上述示例将使用10px、20px、30px和40px的切片线。

3.2 切片线百分比距离

div {
  border-image-slice: 10% 20% 30% 40%;
}

上述示例将使用10%、20%、30%和40%的切片线。

3.3 使用填充

div {
    border-image-slice: 30% 40% 50% 60% round;
}

上述示例将使用百分比距离为 30%、40%、50% 和 60% 的切片线，并使用 round 填充不被放置的区域。

4. 注意事项

• 兼容性：IE浏览器11及更高版本、Edge浏览器12及更高版本、Chrome、Firefox、Safari浏览器全部支持该属性。
• 该属性被声明为动画化属性。
• 该属性仅适用于使用 border-image 的元素，即使用该元素添加自定义边框。

5. 总结

borderImageSlice 属性定义了如何切片图像以创建一系列边框的九个部分。 该属性只适用于使用 border-image 的元素，即使用该元素添加自定义边框。可以通过设置切片线的距离和使用填充来实现自定义边框。总的来说使用该属性可以轻松实现不同风格的自定义边框，同时也能够兼容主要的浏览器。