CSS 将边框半径添加到 IFrame
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6535217/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS adding border radius to an IFrame
提问by JHollanti
Adding a border to an IFrame is no biggie - you do it like this e.g.:
向 IFrame 添加边框没什么大不了的 - 您可以这样做，例如：
border: 4px solid #000;
-moz-border-radius: 15px;
border-radius: 15px;
The problem is that when you load content to that IFrame, the content overlaps the borders in the corners, like so:
问题在于，当您将内容加载到该 IFrame 时，内容会与边角的边框重叠，如下所示：
Any ideas how one might get past this issue? E.g. is there a JavaScript library that would take care of this...
任何想法如何解决这个问题？例如，是否有一个 JavaScript 库可以解决这个问题...
采纳答案by Michael Giovanni Pumo
Border radius isn't well supported or consistent yet. If you want the desired affect, try using DIV's around the element and use graphics instead, with an overflow of hidden in your CSS. You might want to look into the sliding doors tehnique if your iframe varies in height.
边界半径尚未得到很好的支持或一致。如果您想要所需的效果，请尝试在元素周围使用 DIV 并使用图形代替，并在 CSS 中隐藏溢出。如果您的 iframe 高度不同，您可能需要查看推拉门技术。
http://www.alistapart.com/articles/slidingdoors/
http://www.alistapart.com/articles/slidingdoors/
Hope this helps.
希望这可以帮助。
Good luck!
祝你好运！
回答by Plippie
You can also do it like this:
你也可以这样做：
<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>
I have also included all the youtube options in the above example:
我还在上面的示例中包含了所有 youtube 选项：
1: autoplay=1 (0/1 | automatic play movie)
1: autoplay=1 (0/1 | 自动播放影片)
2: loop=1 ( 0/1 looping on/off )
2：loop=1（0/1 循环开/关）
3: rel=0 ( hide related movies after movie ending, this does not always work)
3：rel=0（电影结束后隐藏相关电影，这并不总是有效）
4: border=0 (removes youtube border)
4：border=0（移除youtube边框）
5: modestbranding=1 (removes youtube logo)
5：适度品牌= 1（删除youtube徽标）
回答by Stefan Rein
Put the iframe in a wrapper element and give the wrapping element this CSS property:
将 iframe 放在包装元素中，并为包装元素提供此 CSS 属性：
transform: translateY(0px);
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>回答by Samuele Mattiuzzo
Use this property:
使用此属性：
border: 4px solid #000;
-moz-border-radius: 15px;
border-radius: 15px;
overflow: hidden;
回答by shadeydave
I know this is a rather old thread, but I found a valid work around for it that the others didn't cover.
我知道这是一个相当古老的线程，但我找到了其他人没有涵盖的有效解决方法。
What you're seeing is a z-indexing issue. All you need to do is put your iFrame into a DIV, and set the DIV's and iframe's position to absolute. Then set your z-index in CSS. It works great with Youtube videos in bubbles!
您看到的是 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>
回答by guanome
回答by Philihp Busby
The box-shadow will round corners. Just have a spread-distance of the thickness of your border and a blur value of 0. This is a hack, but what isn't in HTML?
box-shadow 将圆角。只需有一个边界厚度的传播距离和 0 的模糊值。这是一个技巧，但 HTML 中没有什么？
box-shadow: 0 0 0 1px #000;
Will add a 1 pixel border. The first two zeros are the offset. The third zero is how much blur you want to give to the shadow (none). The 1px is how far "out" you want the shadow to go. The last parameter is the color of the border. Most people omit the spread because they want their shadows to be the same size as the element.
将添加一个 1 像素的边框。前两个零是偏移量。第三个零是你想要给阴影多少模糊（无）。1px 是您希望阴影“离开”多远。最后一个参数是边框的颜色。大多数人省略传播是因为他们希望阴影与元素的大小相同。
Here is an example where I did this, which works in at least IE9 and Chrome 17: http://www.philihp.com/blog/2012/i-made-a-gps-locator-for-myself/
这是我这样做的一个例子，它至少适用于 IE9 和 Chrome 17：http: //www.philihp.com/blog/2012/i-made-a-gps-locator-for-myself/
回答by dfoxii
In case you haven't figured this out yet, try this...works for me:
如果你还没有弄清楚这一点，试试这个......对我有用：
I have noticed that if you try to do this externall even to the tag, it doesn't work. Set style within the iframe tag.
我注意到，如果您尝试在标签外部执行此操作，则它不起作用。在 iframe 标签内设置样式。
Good Luck!
祝你好运！
回答by SwiftNinjaPro
Working solution: (2019) this allows you to apply any additional css you want, keep the iframe dynamic, and still interact with the iframe.
工作解决方案：（2019）这允许您应用您想要的任何其他 css，保持 iframe 动态，并且仍然与 iframe 交互。
add this javascript (or jquery) function to your page:
将此 javascript（或 jquery）函数添加到您的页面：
pure javascript solution:
纯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 solution:
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: (optional)
css：（可选）
iframe-border{
border-radius: 20px;
}
usage:
用法：
<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>
回答by user3906103
You miss overflowand positionproperties. This should work:
你想念overflow和position属性。这应该有效：
border: 4px solid #000;
-moz-border-radius: 15px;
border-radius: 15px;
overflow: hidden;
position: relative;
