我有这张图片的代码:
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的border-radius而不是div来“剪切”元素。 我希望我已经解释过了!谢谢!
答案 0 :(得分:1)
只需将其添加到CSS中,以获得具有圆角的外部或父div。
overflow:hidden
对于谷歌地图来说,这并不容易。
看看几个不同的选项:
http://maps.forum.nu/temp/gm_rounded_corners.html
答案 1 :(得分:1)
将border-radius
设置为iframe
元素。
以下是jsFiddle
中的示例答案 2 :(得分:0)
为所有内部元素(子元素)创建css:
opacity:0.99;
或任何不透明度&lt; 1。