javascript - 隐藏边缘的div溢出

我有一个名为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的漂亮边缘。注意：（最简单的解决方案）-在这种情况下，仅向border-radius添加相同的innerdiv属性是没有解决方案的。我尝试添加的是属性overflow，但这种方式似乎不起作用：#innerdiv { overflow: hidden; overflow-x: hidden; overflow-y: hidden;}  编辑：我希望绿色元素不显示在红色角的上方。 (adsbygoogle = window.adsbygoogle || []).push({}); 最佳答案 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> (adsbygoogle = window.adsbygoogle || []).push({});