带有弯曲边和溢出的 Div：隐藏在 Chrome 和 Safari 中答案

【问题标题】：Div with a curved side and overflow:hidden in Chrome and Safari带有弯曲边和溢出的 Div：隐藏在 Chrome 和 Safari 中
【发布时间】：2013-07-14 21:32:32
【问题描述】：

这就是我想要实现的目标：http://jsfiddle.net/ShKNu/5/

如您所见，地图 div 加载在 main div 之上，但 overflow:hidden 仅适用于 Firefox 和 IE。在 Chrome 和 Safari 中，地图不会被截断，而是重叠到 header div 中。

Firefox：工作
IE：作品
Chrome：不起作用
Safari：不工作

有什么想法吗？

【问题讨论】：

当父级未静态定位时，overflow:hidden; 在基于 webkit 的浏览器中中断，但这里似乎并非如此......
@Enigmadan 那是因为谷歌地图在 V3 中不支持圆角；再加上您上面描述的常见问题，Webkit 浏览器将很难解决这个问题。此外，除此之外，我认为试图掩盖地图元素的任何部分也是违反 google maps API 服务条款的。
@Ohgodwhy 啊。那么this 会违反服务条款吗？
这是否意味着我应该远离这个？它必须适用于所有平台。..

标签： javascript jquery html css

【解决方案1】：

希望这是您正在寻找的？

.main {
display:block;
background: #999;
width: 100%;
height: 500px;
margin-top: -30px;
overflow: hidden;
position:relative;
border-radius: 50% 50% 0 0 / 30px 30px 0 0;
-moz-border-radius: 50% 50% 0 0 / 30px 30px 0 0;
-webkit-border-radius: 50% 50% 0 0 / 30px 30px 0 0;
}

【讨论】：