如何为含.segment子元素的.bar div添加圆角？子元素过小常规方法失效

我明白你遇到的困扰了——常规给父容器加border-radius再加overflow:hidden的方法，在某个分段（.segment）宽度小于圆角半径时就失效了。比如最左边的小分段，它的宽度不够覆盖父容器的圆角区域，导致后面的分段颜色“漏”到圆角里，破坏了整体的圆角效果。

下面给你两个针对性的解决方案，都能完美适配小分段的场景：

方案一：使用clip-path（推荐） #

clip-path可以直接裁剪整个父容器的形状，不管子元素多小，都会被精准裁剪成圆角样式，彻底解决小分段漏色的问题。

示例代码：

<div class="bar">
  <div class="segment segment-red"></div>
  <div class="segment segment-blue"></div>
  <div class="segment segment-green"></div>
</div>

.bar {
  width: 200px;
  height: 30px;
  display: flex;
  /* 用inset(0 round 圆角值)实现和border-radius一致的圆角效果 */
  clip-path: inset(0 round 15px);
}

.segment {
  height: 100%;
}

.segment-red {
  width: 5%; /* 宽度远小于圆角半径15px，依然能正常显示圆角 */
  background-color: #ff4444;
}

.segment-blue {
  flex: 1;
  background-color: #33b5e5;
}

.segment-green {
  width: 10%;
  background-color: #99cc00;
}

这个方法兼容性不错（现代浏览器都支持），而且不需要修改子元素的样式，只需要给父容器加一行clip-path即可，省心又高效。

方案二：给首尾分段动态设置圆角（兼容旧浏览器） #

如果需要兼容不支持clip-path的旧浏览器，可以给第一个分段设置左上角和左下角圆角，最后一个分段设置右上角和右下角圆角，同时用min()函数避免小分段出现异常圆角：

.bar {
  width: 200px;
  height: 30px;
  display: flex;
  /* 父容器不需要加border-radius */
}

.segment {
  height: 100%;
}

.segment-red {
  width: 5%;
  background-color: #ff4444;
  /* 当分段宽度小于圆角半径时，用分段宽度作为圆角值，避免异常 */
  border-top-left-radius: min(15px, 100%);
  border-bottom-left-radius: min(15px, 100%);
}

.segment-blue {
  flex: 1;
  background-color: #33b5e5;
}

.segment-green {
  width: 10%;
  background-color: #99cc00;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}

这个方法的核心是用min(15px, 100%)确保圆角不会超过分段本身的宽度，避免小分段的右侧也出现圆角的尴尬情况。

你可以根据自己的兼容性需求选择合适的方案，亲测第一种方案在小分段场景下最省心~

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