HTML制作渐变下划线

Question

想做一个渐变下划线

代码部分

            h1{
                padding-bottom: 0px;
                border-bottom: 20px solid;
                width: 157px;
                border-image: -webkit-linear-gradient(to bottom,black , rgba(214, 211, 211, 0.53) , #ffffff)
            }

想做成这种效果

Answer 1

border-image: linear-gradient()了解一下

h1{
border-bottom: 20px solid;
border-image: linear-gradient(to bottom, #000 99%, #fff,#c1c1c1) 1;
}