CSS3圆角与谷歌地图
我试图在谷歌地图中使用带有css3 border-radius属性的圆形边框,但它不适用于chrome,在其他浏览器中它的工作效果很好.任何想法或建议？在这里,我将我的代码和等待积极的答复.谢谢
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Testing</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body>
<style type="text/css" >
#map {
position: absolute;
top: 120px;
left: 0;
right: 0;
bottom:0;
z-index: 1;
overflow: hidden;
border:solid 3px #00FF33;
border-radius:15px;
width: 500px;
height: 200px;
margin:0 auto;
-moz-border-radius:15px;
-webkit-mask-border-radius:15px;
-webkit-border-radius:15px;
}
#wrapper {
position:absolute;
}
</style>
<div id="wrapper">
<div id="map" ></div>
</div>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var i,marker;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: 'marker_icon.png',
borderRadius: 20,
animation: google.maps.Animation.DROP
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]+' <img src="map-pin.png" /> <div style="background:#090;height:100px;width:200px;">yeah its working perfect ..!!!</div><a href="http://www.google.com">Google</a><form><a href="javascript: alert(\'foo!\');">Click Me</a></form>');
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</body>
</html>
小智 27
我目前在Safari和Chrome上遇到了同样的问题.我不得不将Chrome3的translate3d置为零并为Safari添加webkit-mask-image:
-webkit-transform: translate3d(0px, 0px, 0px);
-webkit-mask-image: -webkit-radial-gradient(white, black);
小智 19
您必须在map元素中设置div的样式,而不是map元素.
map > div {
border-radius: 10px;
}
- 我必须为那个 div 和它的直接子 div 设置样式 (2认同)
- 我没有像@ guss-hogg-blake那样将其设置为直接子级的div，而是在上述CSS中添加了“ overflow：hidden;”。 (2认同)
如果你想在不使用任何图像的情况下实现相同的效果,这里是jsfiddle http://jsfiddle.net/alxscms/3Kv99/的解决方案.如果您愿意,还可以添加褪色的内边框,而不会破坏地图内的导航.
这是html的代码:
<div class="wrapper">
<div class="map" id="map"></div>
<i class="top"></i>
<i class="right"></i>
<i class="bottom"></i>
<i class="left"></i>
<i class="top left"></i>
<i class="top right"></i>
<i class="bottom left"></i>
<i class="bottom right"></i>
</div>
风格(scss):
$radius: 10px;
$thickness: 5px;
$border-color: rgba(black, 0.15);
$background-color: white;
.wrapper {
position: relative;
width: 400px;
height: 200px;
overflow: hidden;
margin: 50px;
& > i {
display: block;
position: absolute;
&.top {
top: 0;
border-top: $thickness solid $border-color;
&:after {
top: -$radius/2 - $thickness;
border-top: $radius/2 solid $background-color;
}
}
&.right {
right: 0;
border-right: $thickness solid $border-color;
&:after {
right: -$radius/2 - $thickness;
border-right: $radius/2 solid $background-color;
}
}
&.bottom {
bottom: 0;
border-bottom: $thickness solid $border-color;
&:after {
bottom: -$radius/2 - $thickness;
border-bottom: $radius/2 solid $background-color;
}
}
&.left {
left: 0;
border-left: $thickness solid $border-color;
&:after {
left: -$radius/2 - $thickness;
border-left: $radius/2 solid $background-color;
}
}
&.top:not(.right):not(.left),
&.bottom:not(.right):not(.left) {
height: $thickness;
left: $radius+$thickness;
right: $radius+$thickness;
}
&.left:not(.top):not(.bottom),
&.right:not(.top):not(.bottom) {
width: $thickness;
top: $radius+$thickness;
bottom: $radius+$thickness;
}
&.top.right,
&.top.left,
&.bottom.right,
&.bottom.left {
width: $radius;
height: $radius;
&:after {
content:"";
position: absolute;
width: 1.5*$radius;
height: 1.5*$radius;
}
}
&.top.right {
border-top-right-radius: $radius;
&:after { border-top-right-radius: 1.5*$radius; }
}
&.top.left {
border-top-left-radius: $radius;
&:after { border-top-left-radius: 1.5*$radius; }
}
&.bottom.right {
border-bottom-right-radius: $radius;
&:after { border-bottom-right-radius: 1.5*$radius; }
}
&.bottom.left {
border-bottom-left-radius: $radius;
&:after { border-bottom-left-radius: 1.5*$radius; }
}
}
}
#map {
width: inherit;
height: inherit;
.gmnoprint {
display: none;
}
}
当我添加z-index属性时,它对我有用:
#map {
...
-webkit-border-radius:20px;
z-index:0;
}
Jar*_*red -3
尽管我们很想这么做，但目前还做不到。
另一种方法是在每个角上叠加圆角切口，使其看起来像圆角。基本上创建一个圆角正方形，将其反转，使其成为一个剪切形状，分成 4 个角块，将每个角放置在父容器内。
例子
.container { width: 400px; height: 300px; position: relative; }
.map { width: 100%; height: 100%; }
.corner { width: 30px; height: 30px; position: absolute; background-image: url(my/corners.png) }
.corner.topleft { top: 0; left: 0; background-position: 0 0; }
.corner.topright, etc.
| 归档时间： |
|
| 查看次数： |
17721 次 |
| 最近记录： |