1

我有一个网站在名为 Ushahidi 的地图平台上运行。默认模板非常四四方方，所以我在摆弄 CSS 并使用边框半径四舍五入。

它对其他元素有帮助，但地图是这样一个正方形，它不会放松！

这可能是不可能的，想知道这里是否有人有过这方面的经验。使用检查元素的 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>

我也添加了一个检查元素 HTML 的屏幕。看起来它正在使用“开放图层”。我听说过，但不完全了解发生了什么。

是否有可能使我的地图边缘变圆？如果有帮助，这里是网站：http: //tinyurl.com/c8djrvr

在此处输入图像描述

4

2 回答 2

2

应用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。

于 2013-09-30T16:42:05.283 回答
1

我会建议更通用和更安全的 CSS 选择器（因为 ID#OpenLayers_Map_11_OpenLayers_ViewPort是由 OpenLayers 生成的，它的值是不可预测的；OL 2.12 和更早的产品 ID 包含点，因此不适合 CSS 选择器）：

.olMap, .olMapViewport {
    border-radius: 25px;
}
于 2013-10-02T20:15:13.227 回答