如何 “切割” 根据DIV

问题描述：

的边界半径我有这个图片的代码元素：如何 “切割” 根据DIV

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>

border-radius div

然后，我想根据div的border-radius“切割”元素，而不是在div之外。我希望我解释过！谢谢！

不积极是什么问题，但通常谷歌地图以iframe的形式呈现，所以任何你想做的地图都可能需要做#map iframe作为CSS选择器。 – Rooster 2012-07-24 22:30:13

答

设置border-radius到iframe元素。

这里是jsFiddle

答

只需将此添加到您的CSS为具有圆角的外部或父级div。

overflow:hidden

对于google地图来说并不容易。

看一看一些不同的选择：

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

作品！但地图的角落没有：/ – SoldierCorp 2012-07-24 22:30:07

看到我更新的答案。 – 2012-07-24 22:43:44

答

制作CSS的所有内部元素的例子（子元素）：

opacity:0.99;

或任何不透明< 1.

如何 “切割” 根据DIV

相关推荐