使用渐变实现文字彩色下划线

文字彩色下划线

使用渐变实现文字彩色下划线

效果

代码部分

html

<span class="container">
    <span class="text">这里是渐变彩色下划线</span>
    <div class="border"></div>
</span>

css

.container {
    position: relative;
}
.text {
    font-size: 32px;
    font-weight: bold;
    color: #a6d622;
}

.border {
    position: absolute;
    width: 100%;
    height: 6px;
    bottom: 2px;
    background: linear-gradient(270deg, rgba(248, 115, 115, 0) 0%, #2252d6 100%);
    border-radius: 3px;
    opacity: 0.7;
}

总结：

主要是渐变的使用：

background-image: linear-gradient(0deg, red 10%, yellow)

background-image: linear-gradient(90deg, red 10%, yellow)

第一个参数：渐变方向顺时针旋转

后面的参数是颜色，百分比是从开始到结束，到高度10%位置是黄色渐变开始、最后以红色结束