尝试使包装器的边缘变圆，同时将边框保持在所有元素的顶部

Question

我正在尝试使用自定义 css 包装器来制作圆边边框。但是 z-index 总是在下面显示它，除非我使子元素透明或不可见。

有没有办法让边框 z-index 显示在上面，或者给 ::before 个元素添加边框？

这是我的代码：

<div id="PollWrapper" style="width: 100%;" class="PollBar">
  <div
    class="bad"
    style="font-size: 18px; overflow: hidden; height: 42px; float: left; background-color: #fe0000; width: 50%;"
  >
    <center>Bad!(50%)</center>
  </div>
  <div
    class="good"
    style="font-size: 18px; overflow: hidden; height: 42px; float: left; background-color: #06BF00; width: 50%;"
  >
    <center>Good!(50%)</center>
  </div>
</div>

以及我正在使用的图片及其下方的图片，我希望它看起来如何。我想只做一个白色的边框来给人一种圆边的错觉会更容易。但我对所有想法持开放态度。谢谢。

Answer 1

边框本身没有z-index。问题是 children 比 parent 大，因此它们被绘制在 children 之外（溢出）。您可以在 .PollBar 上使用 overflow: hidden，或在 children 上设置边框半径（.bad 的左上角和左下角，.good 的右上角和右下角。

Answer 2

添加到，您还可以对 .PollBar 元素使用 display: flex，而不是对子元素使用 float。

参见下面的示例：

.PollBar {
  display: flex;
}
.poll-result {
  font-size: 18px; 
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bad {
  background-color: #fe0000;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}

.good {
  background-color: #06BF00;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
}

<div id="PollWrapper" style="width: 100%;" class="PollBar">
  <div
    class="poll-result bad"
    style=" width: 40%;"
  >
    <center>Bad!(40%)</center>
  </div>
  <div
    class="poll-result good"
    style="width: 60%;"
  >
    <center>Good!(60%)</center>
  </div>
</div>

尝试使包装器的边缘变圆，同时将边框保持在所有元素的顶部

Trying to round the edges for a wrapper while keeping border on top of all elements

css

z-index

wrapper