如何「切割」根據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之外。我希望我解釋過！謝謝！

來源

2012-07-24 SoldierCorp

不積極是什麼問題，但通常谷歌地圖以iframe的形式呈現，所以任何你想做的地圖都可能需要做#map iframe作爲CSS選擇器。 – Rooster 2012-07-24 22:30:13

設置border-radius到iframe元素。

這裏是jsFiddle

來源

2012-07-24 22:41:08 skmasq

只需將此添加到您的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

來源

2012-07-24 22:27:29

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

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

製作CSS的所有內部元素的例子（子元素）：

opacity:0.99;

或任何不透明< 1.

來源

2014-11-24 20:29:12

如何 「切割」 根據DIV

回答

相關問題

如何「切割」根據DIV