Html 是否可以在 iframe 上使用 CSS 圆角？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5738985/
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
Is it possible to have CSS rounded corners on an iframe?
提问by sren
I've looked around, and as far as I can see it's not possible, but say you're embedding a YouTube iframe, is it possible to round those corners using CSS?
我环顾四周，据我所知这是不可能的，但是假设您要嵌入 YouTube iframe，是否可以使用 CSS 绕过这些角落？
采纳答案by Paul Hiles
The div container method described in How to Get Rounded Corners on an iFrame using Border-Radius CSSworks for me.
如何使用 Border-Radius CSS 在 iFrame 上获取圆角中描述的 div 容器方法对我有用。
And to do this you simply wrap the iFrame in div tags and give the div these css properties:
<div style="border-radius: 10px; width: 300px; overflow: hidden;">The
border-radiusshould be set to whatever you want the roundness to be, and thewidthmust be set to the width of the iFrame, else you will get only a few (if any) rounded corners. But the most important thing is the overflow: hidden, as this hides the iFrames real corners.
为此，您只需将 iFrame 包装在 div 标签中，并为 div 提供这些 css 属性：
<div style="border-radius: 10px; width: 300px; overflow: hidden;">该
border-radius应设置为任何你想要的圆度可以了，width必须设置为iFrame的宽度，否则你将只能得到少数（如果有的话）圆角。但最重要的是overflow: hidden，因为它隐藏了 iFrames 的真实角落。
回答by jeffreynolte
Wrapping the <iframe>in a <div>should work.
包裹<iframe>在 a<div>应该工作。
#wrap {
width: 320px;
height: 320px;
-moz-border-radius: 10px;
background: red;
position: relative;
}
iframe {
width: 300px;
height: 300px;
position: absolute;
top: 10px;
left: 10px;
}<div id="wrap">
<iframe src="http://google.com" />
</div>I have attached a jsfiddle to demonstrate: http://jsfiddle.net/fxPsC/
我附上了一个 jsfiddle 来演示：http: //jsfiddle.net/fxPsC/
回答by Samshel
The way to go is wrapping the iframe in a circular div as other users suggested. The only difference being that you have to add an additional style position:relativeto the wrapper for it to work in Chrome browser.
按照其他用户的建议，要走的路是将 iframe 包装在圆形 div 中。唯一的区别是您必须向position:relative包装器添加额外的样式才能使其在 Chrome 浏览器中工作。
So the code would go like this:
所以代码会是这样的：
.circle {
width: 320px;
height: 320px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
overflow:hidden;
position:relative;
}<div class="circle">
<iframe width="640" height="480" src="https://www.youtube.com/embed/_8CP1tT8tdk" frameborder="0" allowfullscreen></iframe>
</div>回答by Ryan Jarvis
You can also add it to the iframe tag if your tag has inline style:
如果您的标签具有内联样式，您还可以将其添加到 iframe 标签中：
<iframe
width=\"100%\" height=\"100%\"
frameborder=\"0\" style=\"border:0;border-radius: 25px\";
src=". $locationlink ." allowfullscreen>
</iframe>
回答by Dawg
Try adding this to your CSS:
尝试将其添加到您的 CSS：
iframe {
border-radius: 10px;
}
