具有圆角的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只是使用div作为占位符，以便它可以插入更多的元素。

更新

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