2

だから私は静的なGoogleマップの結果を歪めようとしているので、あなたが「それを」見下ろしているように見えます. とにかく、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 に答える