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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:08:59  来源:igfitidea点击:

Is it possible to have CSS rounded corners on an iframe?

htmlcssiframe

提问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 在 iF​​rame 上获取圆角中描述的 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 the widthmust 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;
}