CSS将边框半径添加到IFrame

Question

向IFrame添加边框并不重要 - 您可以这样做,例如:

  border: 4px solid #000;
  -moz-border-radius: 15px;
  border-radius: 15px;

问题是,当您将内容加载到该IFrame时,内容会与角落中的边框重叠,如下所示:

任何想法如何通过这个问题？例如,是否有一个JavaScript库来处理这个...

Answer 1

你也可以这样做:

<div style="padding:10px;background:#000;webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;width:560px;margin:0 auto;overflow:hidden;">
    <iframe src="http://www.youtube.com/embed/MOVIEID?fs=1&autoplay=1&loop=1&rel=0&border=0&modestbranding=1" width="560" height="315" frameborder="0"></iframe>
</div>

我还在上面的示例中包含了所有youtube选项:

1:autoplay = 1(0/1 |自动播放电影)

2:loop = 1(0/1循环开/关)

3:rel = 0(电影结束后隐藏相关电影,这并不总是有效)

4:border = 0(删除youtube边框)

5:modestbranding = 1(删除youtube徽标)

Answer 2

将iframe放在包装器元素中,并为包装元素提供此CSS属性:

transform: translateY(0px);

.corner-wrapper {
  display: block;
  overflow: hidden;
  width: 300px;
  height: 150px;
  border-radius: 10px;
  transform: translateZ(0px);
  border: 3px solid #eee;
}

<div class="corner-wrapper">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d77935.71780117304!2d9.691260439866745!3d52.37964560033004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47b00b514d494f85%3A0x425ac6d94ac4720!2sHannover!5e0!3m2!1sde!2sde!4v1458445807305" width="300" height="150" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

Answer 3

使用此属性:

border: 4px solid #000;
-moz-border-radius: 15px;
border-radius: 15px;
overflow: hidden;

Answer 4

边框半径尚未得到很好的支持或一致。如果您想要所需的效果，请尝试在元素周围使用 DIV，并使用图形来代替，并在 CSS 中隐藏溢出。如果您的 iframe 高度不同，您可能需要研究滑动门技术。

http://www.alistapart.com/articles/slidingdoors/

希望这可以帮助。

祝你好运！