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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用此属性：

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

Answer 4

我知道这是一个相当陈旧的主题，但我找到了一个有效的工作，其他人都没有覆盖。

您所看到的是z索引问题。您需要做的就是将您的iFrame放入DIV，并将DIV和iframe的位置设置为绝对。然后在CSS中设置z-index。它适用于泡泡中的Youtube视频！

<style>

#player-wrapper{
    border-radius:50%;  
    border:solid 1px #999;
    width:360px;
    height:360px;
    overflow:hidden;
    position:absolute;
    left:50%;
    top:90px;
    margin-left:-130px;
    z-index:10;
}
#player-wrapper iframe{
    position:absolute;
    left:50%;
    margin-left:-320px; 
    z-index:9;
}
</style>

<div id="player-wrapper">
    <iframe id="player" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/rTMMraosnzg></iframe>
</div>

Answer 5

您可以使用Malsap jQuery圆角插件。它不会解决实际问题，但它会给你圆角但没有问题。

Answer 6

边界半径尚未得到很好的支持或一致性。如果你想要所需的效果，请尝试在元素周围使用DIV并使用图形，并在CSS中隐藏溢出。如果您的iframe高度不同，您可能需要查看滑动门tehnique。

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

希望这有帮助。

祝你好运！

Answer 7

盒子阴影会圆角。只是边界的厚度的传播距离和模糊值为0.这是一个黑客，但HTML中没有？

box-shadow: 0 0 0 1px #000;

将添加1像素边框。前两个零是偏移量。第三个零点是你想给阴影增加多少模糊（无）。 1px是你想要阴影走多远的距离。最后一个参数是边框的颜色。大多数人都忽略了传播，因为他们希望他们的阴影与元素的大小相同。

以下是我执行此操作的示例，该示例至少适用于IE9和Chrome 17：http://www.philihp.com/blog/2012/i-made-a-gps-locator-for-myself/

Answer 8

如果您还没有想到这一点，试试这个......对我有用：

我注意到如果你尝试对标签进行外部测试，它就不起作用了。在iframe代码中设置样式。

祝你好运！

Answer 9

工作解决方案：（2019年） 这样，您便可以应用所需的任何其他CSS，保持iframe动态，并仍然与iframe交互。

将此JavaScript（或jquery）功能添加到您的页面：

纯JavaScript解决方案：

function setIframeBorder(){
    let iframeBorder = document.getElementsByTagName('iframe-border');
    for(let i = 0; i < iframeBorder.length; i++){
        let iframe = iframeBorder[i].getElementsByTagName('iframe')[0];
        let width = iframeBorder[i].getAttribute('width'); let height = iframeBorder[i].getAttribute('height');
        if(width){iframeBorder[i].style['width'] = width;} if(height){iframeBorder[i].style['height'] = height;}
        iframe.style['width'] = '100%'; iframe.style['height'] = '100%';
        iframeBorder[i].style['overflow'] = 'hidden'; iframeBorder[i].style['display'] = 'inline-block';
        iframe.style['position'] = 'relative'; iframe.style['margin'] = '0';
    }
}
setInterval(setIframeBorder, 10);

jquery解决方案：

function setIframeBorderJquery(){
    $('iframe-border').each(function(){
        $(this).css({'overflow': 'hidden', 'display': 'inline-block', 'width': $(this).attr('width'), 'height': $(this).attr('height')});
        $('iframe', this).css({'position': 'relative', 'margin': '0', 'width': '100%', 'height': '100%'});
    });
}
setInterval(setIframeBorderJquery, 10);

css ：（可选）

iframe-border{
    border-radius: 20px;
}

用法：

<iframe-border width="560" height="315">
    <iframe src="https://www.youtube-nocookie.com/embed/ESjRtD0VoRk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</iframe-border>

Answer 10

将css属性overflow: hidden;添加到iframe的父元素中可以正常工作！

像这样：

<html>

<body>
  <div style="border-radius:10px;overflow: hidden;">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <div/>
</body>

</html>

Answer 11

您错过了overflow和position属性。这应该有效：

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