CSS实现两组item中间边框不重复,且边框为渐变色
效果如图
.three-net-item {
position: relative;
}
.three-net-item:first-of-type::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(to right, transparent, #1c65c6, transparent);
}
.three-net-item:first-of-type::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(to right, transparent, #1c65c6, transparent);
}
.three-net-item:last-of-type::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(to right, transparent, #1c65c6, transparent);
}