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设置为50%时，会将图像切割为4个部分（5、6、7、8、9区域空了）。然后，当将border-image-width设置为50%时，这4部分图像会原封不动的填充到元素中，从而形成渐变遮罩。

例子

以一个线性渐变的图像为例，其代码如下：

border-image: linear-gradient(#0003,#000) 50%/50%;

此代码将图像切割为4个部分，并将这4部分原封不动地填充到元素中，最终形成渐变遮罩。

其他场景

如果将border-image-width设置较小，则4个部分图像会往各个角的方向收缩。