openlayers - 带圆角的 Openlayer 地图

Question

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

亚历克斯

Answer 1

这对我有用；

JS小提琴

#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 一起工作，但是在阅读了 Chrome 错误中的边框半径后似乎不可能？和CSS 边框半径不会在 Webkit 上修剪图像并使用 chromes 开发工具来修改元素样式。