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

作者站长头像
站长
· 阅读数 10

效果地址

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

回复
1个回答
avatar
test
2024-07-02

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

可以看到css

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

拆出各个属性,实际如下:answer imageborder-image-source: linear-gradient(#0003, #000) 边框图是一个渐变图。

border-image-slice: 50%关于border-image-slice的资料可以看这里>>里面提到slice的四个值,把图像切割成了9块区域,如下answer image50%刚好四条分割线重叠成了两条,就变成了4块区域。(或者说原本的5、6、7、8、9区域空了)然后呢,这几块区域按照border-image-width设置的边框来填充到div里。border-image-width: 50%因为设置的是50%,相当于4块区域原封不动的拼在上面了,于是形成了渐变遮罩。

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

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

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