效果:
<div class="line"></div>
.line {
height: 1px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #a9c2ff 50%, rgba(255, 255, 255, 0) 100%);
border-radius: 4px 4px 4px 4px;
}
CSS实现边框底部渐变色的方法:(最简单的一种)
.item-box {
border-bottom: 1px solid;
border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #00bbf2 20%, rgba(255, 255, 255, 0) 100%);
border-image-slice: 1;
}
参考文章: