隐藏的CSS溢出可以覆盖所有元素？

Question

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

.powder-inner溢出隐藏，那里有一个边框。它不能涵盖所有。 我怎么能涵盖所有？ there is border there ?

Answer 1

使用.powder-inner＆amp;更新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>

Answer 2

.powder-box {
  width: 51px;
  height: 51px;
  border-radius: 50%;
  border: 2px solid #A5B2B5;
  box-shadow: 0 1px 2px 0px #A5B2B5;
  overflow: hidden !important;
  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 !important;
  margin: 1px;
}

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

<div class="powder-box">
  <div class="powder-inner">
    <div class="powder-wave" style=""></div>
  </div>
</div>