Html 带边框图像属性的嵌入式谷歌地图？

.横幅{
边框样式：实心；
边框宽度：20px 20px 20px 20px；
边框图像：url(https://i.imgur.com/5OgMQoX.png) 35 35 35 35;
高度：500px；
宽度：500px；
位置：相对位置；
溢出：隐藏；

}

---

我希望地图实际填充边界div，即到达边界图像的边缘，圆角使其不会窥视到边界的另一侧。这是可能的吗

这实际上取决于图像，因为您使用的

边框图像不是真正的矩形

，这就是为什么iframe和边框图像的边缘之间存在间隙，但我尝试

调整周围的值

，以使其尽可能接近。希望，这有帮助

.banner{
边框样式：实心；
边框图像：url(https://i.imgur.com/5OgMQoX.png) 20 35 25 35;
边框宽度：20px 20px 20px 20px；
高度：500px；
宽度：500px；
位置：相对位置；
溢出：隐藏；
填充：0；
}
.横幅iframe{
位置：绝对位置；
宽度：100%；
身高：100%；
}

<div class="banner">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13004077.93320049!2d-104.65674178116879!3d37.27560719446957!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x54eab584e432360b%3A0x1c3bb99243deb742!2sUnited+States!5e0!3m2!1sen!2sus!4v1513191558069" width="500" height="500" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

.banner {
border-style: solid;
border-width: 20px 20px 20px 20px;
border-image: url(https://i.imgur.com/5OgMQoX.png) 35 35 35 35;
height: 500px;
width: 500px;
position: relative;
overflow: hidden;