gpt4 book ai didi

border - 将边框应用于 CSS 转换透视图像

转载 作者:行者123 更新时间:2023-11-28 11:48:04 25 4
gpt4 key购买 nike

所以我试图扭曲静态 Google map 结果,让您看起来像是在俯视“它”。不管怎样,我已经使用 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>

这给了你:

scaled image

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

如果我添加

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

我反而得到:

bad borders!

如何才能正确应用该边框?我需要做一些其他的 CSS 技巧吗? (是的,这只适用于 Chrome 和 Safari,不管我遗憾地添加了其他扩展)。

最佳答案

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

.test {
border: 3px solid black;
border-radius: 200px;
}

关于border - 将边框应用于 CSS 转换透视图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8900180/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com