2

所以我试图扭曲一个静态的谷歌地图结果，所以看起来你正在“向下看”。无论如何，我已经使用 CSS3 转换让它工作：

<html><head>
<style>
.container {
    margin-left: 200px;
    -webkit-perspective: 600;    
       -moz-perspective: 600;
        -ms-perspective: 600;
         -o-perspective: 600;
            perspective:600;
    -webkit-perspective-origin: top;
       -moz-perspective-origin: top;
        -ms-perspective-origin: top;
         -o-perspective-origin: top;
            perspective-origin: top;                
    width: 400px;
}

.test {
    width: 100%;
    -webkit-transform: rotateX(89deg);
       -moz-transform: rotateX(80deg);
        -ms-transform: rotateX(80deg);
         -o-transform: rotateX(80deg);
            transform: rotateX(80deg);
}

img.map {
    border-radius: 200px;
}
</style></head><body>
<div class=container>
<div class=test><img class="map" src="https://maps.googleapis.com/maps/api/staticmap?center=40.714728,-73.998672&zoom=18&sensor=false&scale=1&format=png&maptype=roadmap&size=400x400&markers=icon:http://tron.robotholocaust.com/pin2.png%7Cshadow:false%7C40.714728,-73.998672"></div>

这给了你：

缩放图像

不过，我想在它周围加上一个边框。

如果我添加

img.map{
    border: 5px solid;
    border-radius: 200px;    
}

我反而得到：

糟糕的边界！

我怎样才能使该边界正确应用？我需要做一些其他的 CSS 技巧吗？（是的，这仅适用于 Chrome 和 Safari，无论我遗憾地添加了其他扩展程序）。

4

1 回答 1

2

如果您对.test元素应用相同的半径并将边框放在那里（但您可能更喜欢实际img标签上的边框；我无法解决这个问题，则以下工作有效。

.test {
    border: 3px solid black;
    border-radius: 200px;
}
于 2012-01-17T19:31:17.470 回答