css 溢出隐藏不能覆盖所有元素？

Question

.powder-box {
  width: 51px;
  height: 51px;
  border-radius: 50%;
  border: 2px solid #A5B2B5;
  box-shadow: 0 1px 2px 0px #A5B2B5;
  overflow: hidden;
  position: relative;
}

.powder-inner {
  width: 45px;
  height: 45px;
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 4px 10px 0 #656565;
  background-color: #00c690;
  overflow: hidden;
  margin: 1px;
}

.powder-wave {
  background-color: white;
  height: 70px;
}

<div class="powder-box">
  <div class="powder-inner">
    <div class="powder-wave" style="margin-top: -54px"></div>
  </div>
</div>

.powder-inner overflow hidden，里面有边框。它不能涵盖所有。我怎样才能覆盖所有？ there is border there ?

Answer 1

更新 .powder-inner 类 使用 border-top-left-radius: 0%; & border-top- right-radius: 0%; 然后移除顶部的绿色曲线。

查看输出 是浏览器缩放它并查看绿色曲线。

.powder-inner {
    width: 45px;
    height: 45px;
    border: 2px solid white;
    border-radius: 49%;
    box-shadow: 0 4px 10px 0 #656565;
    background-color: #00c690;
    overflow: hidden;
    margin: 1px;
    z-index: 2000;
    border-top-left-radius: 0%;
    border-top-right-radius: 0%;
}

.powder-box {
  width: 51px;
  height: 51px;
  border-radius: 50%;
  border: 2px solid #A5B2B5;
  box-shadow: 0 1px 2px 0px #A5B2B5;
  overflow: hidden;
  position: relative;
}

.powder-inner {
  width: 45px;
  height: 45px;
  border: 2px solid white;
  border-radius: 49%;
  box-shadow: 0 4px 10px 0 #656565;
  background-color: #00c690;
  overflow: hidden;
  margin: 1px;
  z-index: 2000;
  border-top-left-radius: 0%;
  border-top-right-radius: 0%;
}

.powder-wave {
  background-color: white;
  height: 70px;
}

<div class="powder-box">
  <div class="powder-inner">
    <div class="powder-wave" style="margin-top: -54px"></div>
  </div>
</div>