如何根据 div 的边界半径“剪切”元素答案

【问题标题】：How to "cut" elements according to the border-radius of div如何根据 div 的边界半径“剪切”元素
【发布时间】：2012-07-24 22:25:16
【问题描述】：

我有这张图片的代码：

CSS：

section.content {
    min-height: 500px;
    width: 73%;
    float: right;
    margin-bottom:0px;
    padding: 5px;
    background: white;
    -webkit-border-top-left-radius: 100px;
    -webkit-border-bottom-right-radius: 100px;
    -moz-border-radius-topleft: 100px;
    -moz-border-radius-bottomright: 100px;
    border-top-left-radius: 100px;
    border-bottom-right-radius: 100px;
    -webkit-box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.79);
    -moz-box-shadow:    0px 0px 18px rgba(50, 50, 50, 0.79);
    box-shadow:         0px 0px 18px rgba(50, 50, 50, 0.79);
}

#map {
    width: 100%;
    height: 200px;
    margin-top: 15px;
    background: #F6F6F6;
    border-radius: 4px;
}

HTML：

<section class="content" id="contentContact">
    <div id="map"></div>
    <form id="contactForm" /></form>
</section>

然后，我想根据 div 的边界半径“切割”元素，而不是超出 div。我希望我已经解释了！谢谢！

【问题讨论】：

不确定问题是什么，但通常谷歌地图被渲染为 iframe，所以你想对地图做的任何事情都可能需要 #map iframe 作为 css 选择器。

标签： css html

【解决方案1】：

将border-radius 设置为iframe 元素。

这是jsFiddle中的一个例子

【讨论】：

【解决方案2】：

只需将其添加到具有圆角的外部或父 div 的 CSS 中即可。

overflow:hidden

对于谷歌地图来说，这并不容易。

看看几个不同的选项：

http://maps.forum.nu/temp/gm_rounded_corners.html

Is there any trick to put rounded corners on a Google map?

Transparent rounded corners on Google Map

【讨论】：

【解决方案3】：

为所有内部元素（子元素）制作css：

opacity:0.99;

或任何不透明度

【讨论】：