我看了一下,就我所知道的,这似乎不可能。但是,假设你嵌入了一个YouTube iframe,你能用CSS将它们的角落变圆吗?
如何使用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的实际角落。
像其他用户建议的那样,解决问题的方法是将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>
<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>
overflow:hidden
,但它会裁剪成一个正方形。 - Alba Mendezborder-radius:10px
,但不需要加上 "-moz" 前缀。 - showdev如果您的标签具有内联样式,也可以将其添加到 iframe 标签中:
<iframe
width=\"100%\" height=\"100%\"
frameborder=\"0\" style=\"border:0;border-radius: 25px\";
src=". $locationlink ." allowfullscreen>
</iframe>
尝试将以下内容添加到您的CSS中:
iframe {
border-radius: 10px;
}