css 颜色渐变线条中间向两边中间粗两边细

crabdave123

于 2017-01-19 15:42:00 发布

阅读量510

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/alksjdfp32r/article/details/120485167

本文介绍了一种使用CSS实现的渐变线条效果，线条由中间向两边渐变，且中间粗两边细。通过设置背景为径向渐变，实现从红色到白色的变化，适用于网页设计中的装饰元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css 颜色渐变线条中间向两边中间粗两边细

参考：

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%);
  }

背景颜色是白色，所以使用的white 100%

css 颜色渐变线条 中间向两边 中间粗两边细

css 颜色渐变线条中间向两边中间粗两边细