Vant 这个地址栏彩色线条是怎么来的?

2023-11-27 17:16:22 +08:00
 humbass

偶然需要一个简单地址,照搬 Vant 界面,发现 Border Bottom 位置有一条彩色间隔,请教间隔是怎么实现的?

截图 https://mautic.ld160.eu.org/static/Jietu20231127-050502.png Vant 链接 https://vant-contrib.gitee.io/vant/v2/#/zh-CN/contact-card

1158 次点击
所在节点    JavaScript
1 条回复
bojackhorseman
2023-11-27 17:17:57 +08:00


.van-contact-card::before {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 2px;
background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background-size: 80px;
content: '';
}

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/995659

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX