将border-radius添加到地图中

Question

我有一个名为Ushahidi的地图平台上运行的网站。默认模板非常四四方方，所以我正在摆弄CSS并使用border-radius将所有内容四舍五入。

它帮助了其他元素，但地图是这样一个方形，它不会缓和！

这可能是不可能的，想知道这里是否有人有这方面的经验。使用inspect元素和视图源的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>

我也添加了一个inspect元素HTML屏幕。看起来它正在使用“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;
}