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

Question

我看了一下，就我所知道的，这似乎不可能。但是，假设你嵌入了一个YouTube iframe，你能用CSS将它们的角落变圆吗？

- sren

Answer 1

如何使用Border-Radius CSS获得iFrame的圆角中描述的div容器方法对我起作用。

要做到这一点，您只需将iFrame包装在div标签中，并为div添加这些CSS属性：

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

border-radius应设置为所需的圆度大小，width必须设置为iFrame的宽度，否则您将只能获得几个（如果有）圆角。但最重要的是overflow:hidden, 这将隐藏iFrame的实际角落。

- Paul Hiles

---

@Ryan 在Chrome浏览器中，你可以直接将 "border-radius: 10px" 应用到 iframe 上。 - feklee

@feklee 截至当前版本（28.0.1500.95），iframe滚动条仍将保持方形，不会变成圆角。将其包装在带有溢出隐藏的div中也无效。滚动条似乎会溢出容器。Firefox和IE工作正常。 - Ryan

Answer 2

像其他用户建议的那样，解决问题的方法是将iframe包装在一个圆形div中。唯一的区别是您需要为包装器添加一个额外的样式position:relative，才能使其在Chrome浏览器中正常工作。

因此，代码应该像这样：

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

- Samshel

Answer 3

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

- jeffreynolte

---

谢谢，这差不多是我想要的，但我更希望实际的 iframe 有圆角 - 没有边框。看起来似乎不可能。 - sren

SimonRentzke是正确的。我甚至尝试使用 overflow:hidden，但它会裁剪成一个正方形。 - Alba Mendez

你可能还想包括 border-radius:10px，但不需要加上 "-moz" 前缀。 - showdev

Answer 4

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

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

- Ryan Jarvis

Answer 5

尝试将以下内容添加到您的CSS中：

iframe {
    border-radius: 10px;
}

- Dawg