带圆角的 Openlayer 地图

Question

我将我的 openlayer 地图集成到一个带圆角的 div 中。我怎样才能让地图有圆角？我尝试将边界半径应用于开发人员工具中的许多 div，但地图拒绝圆角。

亚历克斯

Answer 1

这对我有用；

JS Fiddle

#demoMap
{
    position: relative;        
    width: 200px;
    height: 200px;
    left: 20px;
    top: 20px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    border: 1px solid black;
    overflow: hidden;
}

我想你可能只需要添加

overlfow: hidden;

到您的 CSS 样式，因为 openlayers API 只是使用您的 div 作为占位符，以便插入更多元素。

更新

在阅读了关于 Chrome 的评论后，我尝试让它与 Chrome 一起使用，但这似乎是不可能的 在阅读border-radius in Chrome bug?和CSS Border radius not trimming image on Webkit并使用chromes开发工具修改元素样式后。