某信息栏的边框设计
是的，我又来拿CSS background里的gradient系列函数折腾了。上一期见这里。
嗯，这一期是受了萌娘百科编辑者Grandom为彩虹社成员设计的信息栏模板，以及编辑者TsanconBYin在此基础上制作的BanG Dream!人物信息栏模板的启发。这两个信息栏模板的边框使用了border与background的组合设计，这里则打算仅使用background来实现类似的效果。那么开始。
首先是最基本的两侧边框：
①linear-gradient(to right, #F52 8px, transparent 8px calc(100% - 8px), #F52 calc(100% - 8px))
左边上下边框：
②linear-gradient(#F52 8px,transparent 8px calc(100% - 8px),#F52 calc(100% - 8px)) 0 0/15px 100% no-repeat
①linear-gradient(to right, #F52 8px, transparent 8px calc(100% - 8px), #F52 calc(100% - 8px))
右边上下边框：
③linear-gradient(#F52 8px,transparent 8px calc(100% - 8px),#F52 calc(100% - 8px)) 100px 0/100% 100% no-repeat
②linear-gradient(#F52 8px,transparent 8px calc(100% - 8px),#F52 calc(100% - 8px)) 0 0/15px 100% no-repeat
①linear-gradient(to right, #F52 8px, transparent 8px calc(100% - 8px), #F52 calc(100% - 8px))
四周圆角补齐：
⑦radial-gradient(circle at 0 0,transparent 12px,#F52 12px) 100% 100%/20px 20px no-repeat
⑥radial-gradient(circle at 0 20px,transparent 12px,#F52 12px) 100% 0/20px 20px no-repeat
⑤radial-gradient(circle at 20px 0,transparent 12px,#F52 12px) 0 100%/20px 20px no-repeat
④radial-gradient(circle at 20px 20px,transparent 12px,#F52 12px) 0 0/20px 20px no-repeat
③linear-gradient(#F52 8px,transparent 8px calc(100% - 8px),#F52 calc(100% - 8px)) 100px 0/100% 100% no-repeat
②linear-gradient(#F52 8px,transparent 8px calc(100% - 8px),#F52 calc(100% - 8px)) 0 0/15px 100% no-repeat
①linear-gradient(to right, #F52 8px, transparent 8px calc(100% - 8px), #F52 calc(100% - 8px))
中间接头处圆角补齐：
⑪radial-gradient(circle at 100px calc(100% - 4px),#F52 4px,transparent 4px)
⑩radial-gradient(circle at 100px 4px,#F52 4px,transparent 4px)
⑨radial-gradient(circle at 20px calc(100% - 4px),#F52 4px,transparent 4px)
⑧radial-gradient(circle at 20px 4px,#F52 4px,transparent 4px)
⑦radial-gradient(circle at 0 0,transparent 12px,#F52 12px) 100% 100%/20px 20px no-repeat
⑥radial-gradient(circle at 0 20px,transparent 12px,#F52 12px) 100% 0/20px 20px no-repeat
⑤radial-gradient(circle at 20px 0,transparent 12px,#F52 12px) 0 100%/20px 20px no-repeat
④radial-gradient(circle at 20px 20px,transparent 12px,#F52 12px) 0 0/20px 20px no-repeat
③linear-gradient(#F52 8px,transparent 8px calc(100% - 8px),#F52 calc(100% - 8px)) 100px 0/100% 100% no-repeat
②linear-gradient(#F52 8px,transparent 8px calc(100% - 8px),#F52 calc(100% - 8px)) 0 0/15px 100% no-repeat
①linear-gradient(to right, #F52 8px, transparent 8px calc(100% - 8px), #F52 calc(100% - 8px))
到这里就结束了。再次感谢Grandom佬的独特设计。下期会是什么时候呢？
