【CSS实践】——如何将一个div打造成一条仿颜色渐变线

前言

我们公司最近在设计首页的时候美工标题下方有一条颜色渐变的线，我尝试了很多种方法但都没有达到预想的效果，最终通过了div设计出来了！

内容

其实设计的效果就是像hbuilder中文字下方区域效果

 .div-line{
    margin:0 auto;
    height: 2px;
    width: 20rem;
    background: radial-gradient(red 12%, white 80%);
  }
<div class="div-line"></div>

总结

一切源于积累和总结，感谢浏览！