带圆角的Openlayer地图 [英] Openlayer map with rounded corners

问题描述

我将我的openlayer地图集成到带有圆角的div中.如何使地图具有圆角?我曾尝试在开发人员工具中将border-radius应用于许多div，但地图拒绝显示圆角.

I integrate my openlayer map in a div with rounded corners. How can I get the map to have rounded corners? I have tried to apply border-radius to many divs in developer tools but the map refuses to get rounded corners.

亚历克斯

推荐答案

这对我有用；

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;
}

我认为您可能只需要添加

I think you probably just needed to add

overlfow: hidden;

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

to your CSS style, as the openlayers API just uses your div as a placeholder for it to insert many more elements.

更新

在阅读了Chrome上的评论后，我试图使其与Chrome一起使用，但这似乎是不可能的 在阅读了Chrome Bug中的 border-radius之后?和 CSS边框半径未修剪Webkit上的图像，并使用chromes开发工具修改元素样式.

After reading the comment on Chrome I tried to get it working with Chrome but that does not seem to be possible after reading border-radius in Chrome bug? and CSS Border radius not trimming image on Webkit and using chromes dev tools to modify the element styles.

这篇关于带圆角的Openlayer地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！