效果
代码
方式一
使用两个盒子叠加,给外层的盒子设置渐变色背景和 padding,给内层盒子设置纯色背景。
<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;
}
}
方式二
伪元素
.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上的渐变色。
.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%);
}
方式四
最简单的一种方式
.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;
}