隐藏边上 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>

隐藏边上 div 的溢出

Hide overflow of div on edges

html

javascript

css

overflow

styling