javascript - 隐藏边缘上的div溢出

Question

我有一个名为 outerdiv 的主 div，里面有一个名为 innerdiv 的 div 元素。

因为 outerdiv 获得了 "border-radius" 属性，所以 innerdiv 隐藏了 outerdiv< 的漂亮边缘.

<> 希望你能明白我的意思。但是看看代码:

#outerdiv {
  position: fixed; 
  width: 80%; 
  left: 50%; 
  margin-left: -40%;     
  height: 30%; 
  background: red; 
  margin-top: 5%; 
  border-radius: 20px 20px 0px 0px
}

#innerdiv {
  position: absolute;
  width: 100%;
  background: green;
  height: 40%;
  left: 0%;
  top: 0%;
}

<div onmouseover="document.getElementById('innerdiv').style.display='none'" onmouseout="document.getElementById('innerdiv').style.display=''" id="outerdiv">
  <div id="innerdiv"></div>
</div>


<p style="position: fixed; top: 50%">>MOVE YOUR MOUSE POINTER OVER THE RED AREA TO GET WHAT I MEAN.</p>

关于我的问题:如何隐藏 innerdiv 的溢出，以免它掩盖 outerdiv 的漂亮边缘。

注意:(最简单的解决方案) - 在这种情况下，仅向 innerdiv 添加相同的 border-radius 属性不是解决方案。

我试图添加的是 overflow 属性，但它似乎不是这样工作的:

#innerdiv {
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
}

Edit: I'd like the green element to not display above the red corners.

Answer 1

overflow: hidden 确实有效，您需要将其应用于您的 #outerdiv，而不是 #innerdiv。

#outerdiv {
  position: fixed; 
  width: 80%; 
  left: 50%; 
  margin-left: -40%;     
  height: 30%; 
  background: red; 
  margin-top: 5%; 
  border-radius: 20px 20px 0px 0px;
  overflow: hidden;
}

#innerdiv {
  position: absolute;
  width: 100%;
  background: green;
  height: 40%;
  left: 0%;
  top: 0%;
}

<div id="outerdiv">
  <div id="innerdiv"></div>
</div>