向地圖添加邊界半徑

Question

我有一個網站在名爲Ushahidi的地圖平臺上運行。默認的模板非常方便，所以我用CSS來擺弄和使用邊框半徑四捨五入。

它與其他元素的幫助，但地圖是這樣一個廣場，它不會放鬆！

這可能是不可能的，想知道如果有人在這裏有任何經驗。使用inspect元素和視圖源的html是不同的。不知道這意味着什麼，但猜測HTML由地圖提供者拉入？

這裏是查看源代碼的HTML：我已經添加了檢查HTML元素太的屏幕

<div class="map " id="map"></div> 
<div style="clear:both;"></div> 
<div id="mapStatus"> 
    <div id="mapScale"></div> 
    <div id="mapMousePosition"></div> 
    <div id="mapProjection"></div> 
    <div id="mapOutput"></div> 
</div> 

。看起來它使用「Open Layers」。我聽說過，但不完全瞭解發生了什麼事。

是否可以將我的地圖的邊緣四捨五入？下面是該網站是否有幫助：http://tinyurl.com/c8djrvr

Answer 1

應用border-radius兩層。

CSS

div.map { 
    border: #999 1px solid; 
    width: 800px; 
    height: 366px; 
    position: relative; 
    height: 650px; 
    border-radius: 25px;  /* ADD THIS */ 
} 

#OpenLayers_Map_11_OpenLayers_ViewPort { 
    border-radius: 25px;  /* ADD THIS */ 
} 

它的工作原理。使用任何你想要的像素。我用25px。

Answer 2

我建議更普遍，更安全的CSS選擇器（因爲ID #OpenLayers_Map_11_OpenLayers_ViewPort通過的OpenLayers產生的，它的價值是不可預測的，並OL 2.12及以上的產品ID的，包含點，因此不適合用於CSS選擇器）：

.olMap, .olMapViewport { 
    border-radius: 25px; 
}