border-image实现遮罩的原理是啥?
搞不懂border-image-slice和border-image-width如何配合的,哪位大佬能解释一下?slice和width的百分比都是相对于谁的?
回复
1个回答

test
2024-07-02
之前没研究过这个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设置其他值,效果就不一样了,看得我懵了几天,算是搞懂了。有点意思
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容