Question

JS Fiddle

<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;

}

我希望地图实际填充边框div，即到达边框图像的边缘，角落为圆角，因此它们不会透视到边框的另一侧。这有可能吗？

Answer 1

它实际上取决于图像，因为border-image you have used is not really rectangular为什么iframe的边缘和边框图像之间存在间隙，但我尝试tweak the values around将其作为尽我所能。希望，这有帮助。

＆＃13;

.banner {
  border-style: solid;
  border-image: url(https://i.imgur.com/5OgMQoX.png) 20 35 25 35;
  border-width: 20px 20px 20px 20px;
  height: 500px;
  width: 500px;
  position: relative;
  overflow: hidden;
  padding: 0;
}

.banner iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}

＆＃13;

<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>

＆＃13;

带有border-image属性的嵌入式Google地图？

1 个答案: