效果

代码

方式一

使用两个盒子叠加，给外层的盒子设置渐变色背景和 padding，给内层盒子设置纯色背景。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="bg-box">
    <div class="text">nihao</div>
</div>

.bg-box {
    /*首先我们设置边框只显示底部，宽度为2px的实线。*/
    /*设置线性渐变*/
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #00bbf2 20%, rgba(255, 255, 255, 0) 99%); 
    padding-bottom: 2px;
    .text{
        background: #fff;
    }
}

方式二

伪元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.bg-box {
    position: relative;
}
.bg-box::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: -1;
        margin: -4px;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #00bbf2 20%, rgba(255, 255, 255, 0) 99%)
    }

方式三

这我觉得最优雅的一种方法，只需要用到单层元素，为其分别设置 background-clip、background-origin、background-image 这三个属性，每个属性设置两组值，第一组用于设置border内的单色背景，第二组用于设置border上的渐变色。

1
2
3
4
5
6
7
.bg-box {
  border-bottom: 4px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(to right, #fff, #fff),linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #00bbf2 20%, rgba(255, 255, 255, 0) 99%);
}

方式四

最简单的一种方式

1
2
3
4
5
.bg-box {
    border-bottom: 4px solid;
    border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #00bbf2 20%, rgba(255, 255, 255, 0) 99%);
    border-image-slice: 1;
}