详解 border-image 遮罩原理
在实现 border-image 遮罩时，往往会遇到关于 border-image-slice 和 border-image-width 如何配合的问题。
border-image-slice 的作用
border-image-slice 用于定义边框图像的切割方式。它将图像划分为 9 个区域，如下所示：
+------+------+------+------+ | 1 | 2 | 3 | 4 | +------+------+------+------+ | 5 | 6 | 7 | 8 | +------+------+------+------+ | 9 | | | | +------+------+------+------+
border-image-width 的作用
border-image-width 用于定义边框的宽度。它可以指定一个值或四个值，分别对应上、右、下、左四个方向的边框宽度。
如何配合使用
border-image-slice 和 border-image-width 共同决定了边框图像如何填充到元素中。例如，如果 border-image-slice 设置为 50%，border-image-width 设置为 50%，则图像将被切割成 4 块相等的区域，并填充到元素中，形成一个渐变遮罩。
举例
假设我们有一个元素，应用了以下 css 样式：
border-image: linear-gradient(#0003, #000) 50%/50%;
- border-image-source：指定边框图是一个线性渐变。
- border-image-slice：将图像切割成 4 块区域。
- border-image-width：设置边框宽度为 50%，相当于填充了 4 块区域。
这样，就会形成一个渐变遮罩，其中渐变从底部到顶部逐渐从黑色变为透明。
其他用法
如果 border-image-slice 和 border-image-width 设置其他值，也会产生不同的效果。例如，如果 border-image-slice 设置为 25%，border-image-width 设置为 25%，那么图像将被填充到元素的内边距区域，形成一个更细的遮罩。
