思無邪 (@Clarke.L)一个奇奇怪怪的边框实现 中发帖

许久不见,甚是想念。一直没想好水点啥,刚好就找到一个,那就弄~ 
预览效果
[image]
基本思路
猛地一看,太猛了!这玩意能弄出来?是的,可以。
遇到任何复杂的图形,我们都要想着进行拆分——能不能将它拆分为几个部分呢?
对于这个图案,我们也能发现一些规律:四周的圆头都是圆拼接成的,间隔了个透明的而已。那么如何将一张图挖成这个样子就是我们要解决的问题。
第一步:打底
我们开始不妨直接给一个底,有个基础背景,以方便我们后续创作。
background: #458eff;

[image]
第二步:挖孔
想得到目标图案,我们其实可以先将整个蓝色背景进行挖掉一些圆形,然后将四周用实色填充。
说干就干,我们直接先将整体挖空,我们直接使用mask进行遮罩即可。
mask: radial-gradient(var(--s),
#0000 calc(100% - ...