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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 381 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

vant

间隔

彩色

地址

1 条回复 • 2023-11-27 17:17:57 +08:00

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: '';
}