带圆角的Openlayer地图

Question

我将我的openlayer地图集成在带圆角的div中。如何让地图有圆角？我曾尝试将border-radius应用于开发人员工具中的许多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 dev工具修改元素样式。