Question

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

由于outerdiv获得了"border-radius"属性，因此innerdiv隐藏了outerdiv的漂亮边缘。

＆LT;＆GT;我希望你能明白我的意思。但看看代码：

＆＃13;

#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%;
}

＆＃13;

<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>

＆＃13;

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

注意：（最简单的解决方案） - 在这种情况下，只需向border-radius添加相同的innerdiv属性即无解决方案。

我尝试添加的是overflow属性，但它似乎没有这样做：

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

编辑：我希望绿色元素不会显示在红色角落上方。

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溢出

1 个答案: