border-image实现遮罩的原理是啥？

Question

效果地址

搞不懂border-image-slice和border-image-width如何配合的，哪位大佬能解释一下？slice和width的百分比都是相对于谁的？

Answer 1

之前没研究过这个css，看了一些资料，大概说一下自己见解。

可以看到css

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

拆出各个属性，实际如下：

border-image-source: linear-gradient(#0003, #000) 边框图是一个渐变图。

border-image-slice: 50%关于border-image-slice的资料可以看这里>>
里面提到slice的四个值，把图像切割成了9块区域，如下

50%刚好四条分割线重叠成了两条，就变成了4块区域。（或者说原本的5、6、7、8、9区域空了）
然后呢，这几块区域按照border-image-width设置的边框来填充到div里。
border-image-width: 50%因为设置的是50%，相当于4块区域原封不动的拼在上面了，于是形成了渐变遮罩。

如果我们把border-image-width设置小一点，就可以看到四块区域往各个角的方向收缩的样子。

刚好50%/50%比较好理解一些，要是slice和width设置其他值，效果就不一样了，看得我懵了几天，算是搞懂了。有点意思

Answer 2

border-image-slice属性定义了如何将图片切分成九个区域，并将它们应用到边框的不同部分。该属性可以接受一个四个值的参数，在按照顺序分别描述上、右、下、左四个边框的切图比例。
border-image-width属性定义了使用哪些宽度值拉伸图片以填充边框的相应部分。该属性也可以接受一个四个值的参数，依次对应每个边框的宽度。