线性渐变背景的边框半径

Question

我使用背景来模拟 2 色下划线：

background: linear-gradient(
              to right,
              $green 0%, 
              $green 75%, 
              $red 75%, 
              $red
) no-repeat 0 100%;
background-size: 100% 4px;

这会创建一个漂亮的下划线，但带有方角。如何创建圆角？

我拥有的与我想要的。

Answer 1

直接涂抹有什么问题吗？我是不是错过了什么？

.line {
  background: linear-gradient(
              to right,
              green 0%, 
              green 75%, 
              red 75%, 
              red
  ) no-repeat 0 100%;
  
  background-size: 100% 4px;
  width: 100%;
  height: 4px;
  border-radius: 9999px;
}

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