如何在iframe上圆角圆角

问题描述：

在任何人链接到它之前，这里是我试图遵循的例子。如何在iframe上圆角圆角

我字面上复制的代码完全，并且当我在所有不同browswers加载它，边缘仍然正方形。

查看源代码后，我没有注意到这条线

.TopLeft, .TopRight, .BottomLeft, .BottomRight {position:absolute;z-index:1000;background-image: url(corners.png);width:20px;height:20px;}

是，我不具备这些角落的图片的问题？但是，当我试图检查元素，所以我可以找到'corners.png'什么都没有。我很困惑。

这里是整个代码

<!-- 
Example taken from 
http://search.missouristate.edu/map/mobile/examples/corners.htm 
--> 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Rounded Map Corners - Google Maps Javascript API v3</title> 
<style> 
    html, body {height: 100%; margin: 0;} 
    #Container {position:relative;width:400px;margin:20px;} 
    .TopLeft, .TopRight, .BottomLeft, .BottomRight {position:absolute;z-index:1000;background-image: url(corners.png);width:20px;height:20px;} 
    .TopLeft {left: 0; top: 0;} 
    .TopRight {right: 0; top: 0; background-position: top right;} 
    .BottomRight {right: 0; bottom: 0; background-position: bottom right;} 
    .BottomLeft {left: 0; bottom: 0; background-position: bottom left;} 
    #map_canvas {width: 400px; height: 400px;} 
</style> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
var map; 
function Initialize() { 
    var MapOptions = { 
     zoom: 15, 
     center: new google.maps.LatLng(37.20084, -93.28121), 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     sensor: false 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), MapOptions); 
} 
</script></head><body onload="Initialize()"> 
<div id="Container"> 
    <div class="TopLeft"></div> 
    <div class="TopRight"></div> 
    <div id="map_canvas"></div> 
    <div class="BottomLeft"></div> 
    <div class="BottomRight"></div> 
</div> 
</body></html>

有没有其他人这个例子的工作？或者当你复制并粘贴这些代码时，你会得到和我一样的结果吗？

这里是我的结果的屏幕截图的链接。我试图把代码放在一个jsFiddle中，但它没有奏效。

ImageShack Screenshot

答

你为什么没有得到corners.png。正如你可以很容易地下载它here。

这只是把我带到一个空白页面。林不知道该怎么做。对不起，如果我只是有一个巨大的脑屁，但我不知道该怎么做。 – onTheInternet 2013-04-05 17:42:08

右键单击图像并点击下载按钮。然后将图像复制到您的html文件 – 2013-04-05 17:44:00

等待的同一个directoy中。 NVM。我得到了它的工作。我没有意识到这是一个透明的图像。哈哈。非常感谢！ – onTheInternet 2013-04-05 17:44:53

答

corners.png文件是绝对必需的。这里是该示例网站的资产：http://search.missouristate.edu/map/mobile/examples/corners.png

这也只是把我带到一个空白页面。我不知道该怎么办 – onTheInternet 2013-04-05 17:43:58

这不是空白。这是一个透明背景的图像，角落是白色的。当在白页上查看时，它看起来是空的，但它在那里。从您的浏览器转到文件>另存为，您将可以下载它。 – 2013-04-05 17:46:44

是的，我知道了。非常感谢你！所有答案将被标记为有帮助！ – onTheInternet 2013-04-05 17:48:16

如何在iframe上圆角圆角

相关推荐