css实现线条中间高亮，左右两边模糊（linear-gradient的运用）

效果：

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

 参考文章：

CSS实现边框底部渐变色的4种方法_css下边框渐变-CSDN博客