Question

在任何人链接之前，这是我试图遵循的例子。

我确实完全复制了代码，当我在所有不同的浏览器中加载它时，边缘仍然是正方形。

查看源代码后，我注意到了这一行

 .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

Answer 1

为什么没有得到corners.png。您可以轻松下载here。

Answer 2

当然需要corners.png文件。以下是该示例网站的资产：http://search.missouristate.edu/map/mobile/examples/corners.png

如何在iframe上围绕角落

2 个答案: