如何在单个div内实现带圆角的多色渐变效果？

你可以通过组合线性渐变和径向渐变来实现绿色末端的圆角效果，不需要额外嵌套元素。以下是修改后的代码：

CSS代码 #

.bar {
  height: 20px;
  border-radius: 2.5rem;
  /* 三层背景叠加：绿色左侧矩形 + 绿色右侧半圆 + 灰色底色 */
  background: 
    linear-gradient(green, green) left / calc(50% - 10px) 100%,
    radial-gradient(circle at left center, green 50%, transparent 50%) right / 20px 100%,
    gray;
  background-repeat: no-repeat;
}

HTML代码 #

<div class='bar'></div>

原理说明 #

• 原来的线性渐变在50%处直接切换颜色，导致边缘尖锐。我们把绿色区域拆分为两部分：
  • 左侧的绿色矩形：宽度为总宽度的50%减去10px（半圆的半径），高度100%；
  • 右侧的绿色半圆：用径向渐变实现，直径等于进度条高度（20px），定位在绿色区域的右端，刚好填补矩形的缺口，形成圆角；
• 最底层的灰色背景作为底色，确保右侧区域正常显示。

这样就能实现绿色末端平滑圆角的多色进度条效果，同时保持整个div的左右圆角样式。

内容的提问来源于stack exchange，提问作者debugger