我正在尝试在Safari中剪辑Google Map。我使用的CSS在Chrome和Firefox中运作良好。请参阅此fiddle
<head>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var myLatLng = new google.maps.LatLng(-33.887097, 18.511804);
var mapCanvas = document.getElementById('map_canvas');
var mapOptions = {
center: myLatLng,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div style="width:260px; height:260px; position:absolute; left:0; right:0; top:60px; margin:auto;">
<div id="map_canvas" class="map_container"></div>
</div>
</body>
.map_container {
width:260px;
height:260px;
overflow:hidden;
border-radius: 50% !important;
border: 1px solid black !important;
}
如何在Safari中裁剪地图并仍然保留边框？
最佳答案
尝试使用这个
JS Fiddle
为容器添加了border而不是.map_container
.container {
border-radius:50%;
border:1px solid #000000;
}
.map_container {
width:260px;
height:260px;
overflow:hidden;
-webkit-transform: translateZ(0);
-webkit-mask-image: -webkit-radial-gradient(circle, white, black); /** added mask image **/
border-radius: 50% !important;
/*border: 1px solid black !important;*/
}
进一步了解translatez(0)
关于css3 - 在Safari中裁剪Google Map的问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26375084/