CSS color gradient lines are thick in the middle to both sides and thin on both sides

CSS color gradient lines are thick in the middle to both sides and thin on both sides

 

refer to:

https://segmentfault.com/q/1010000006961164

 

 

<div class="hr-line-div"></div>

  .hr-line-div{
    margin:0 auto;
    height: 1rem;
    width: 20rem;
    background: radial-gradient(red 24%, white 100%);
  }

 

        

  The background color is white, so use white 100%