Question

我环顾四周，据我所知，这是不可能的，但是假设您正在嵌入YouTube iframe，是否可以使用CSS围绕这些角落？

Answer 1

How to Get Rounded Corners on an iFrame using Border-Radius CSS中描述的div容器方法适用于我。

要做到这一点，你只需将iFrame包装在div标签中，并为div提供这些css属性：

<div style="border-radius: 10px; width: 300px; overflow: hidden;">

border-radius应该设置为你想要的圆度，width必须设置为iFrame的宽度，否则你只会得到一些（如果有的话）角落。但最重要的是溢出：隐藏，因为这会隐藏iFrames的真正角落。

Answer 2

将<iframe>中的<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>

我附上了一个jsfiddle来证明： http://jsfiddle.net/fxPsC/

Answer 3

如今其他用户建议将iframe包装在循环div中。唯一的区别是您必须向包装器添加其他样式position:relative才能在Chrome浏览器中使用。

所以代码会是这样的：

＆＃13;

.circle {
	width: 320px;
	height: 320px;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	overflow:hidden;
	position:relative;
}

＆＃13;

<div class="circle">
  <iframe width="640" height="480" src="https://www.youtube.com/embed/_8CP1tT8tdk" frameborder="0" allowfullscreen></iframe>
</div>

＆＃13;

Answer 4

也许如果你使用“封面”图像正确使用它。一些现代主题提供了这一点。

虽然不是最好的解决方案。你的目标是什么？

Answer 5

如果您的代码具有内联样式，您也可以将其添加到iframe代码：

    <iframe 
    width=\"100%\" height=\"100%\"
    frameborder=\"0\" style=\"border:0;border-radius: 25px\";
    src=". $locationlink ." allowfullscreen>
    </iframe>

Answer 6

尝试将此添加到您的CSS：

iframe {
    border-radius: 10px;
}

是否可以在iframe上使用CSS圆角？

6 个答案: