是否有可能在iframe上有CSS圆角？ [英] Is it possible to have CSS rounded corners on an iframe?

问题描述

我已经环顾四周，据我所见，这是不可能的，但是说你嵌入了一个YouTube iframe，是否可以使用CSS对这些角落进行圆角？

中描述的div容器方法 on-an-iframe-using-border-radius-css /rel =nofollow>如何在iFrame上使用Border-Radius CSS获取圆角？适用于我。

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

code>< div style =border-radius：10px; width：300px; overflow：hidden;>

border-radius 应设置为任何你想要的圆度，并且 width 必须设置为width的iFrame，否则你只会得到几个（如果有的话）圆角。但最重要的是 overflow：hidden ，因为这隐藏了iFrames真正的角落。

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?

解决方案

The div container method described in How to Get Rounded Corners on an iFrame using Border-Radius CSS works for me.

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-radius should be set to whatever you want the roundness to be, and the width must 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上有CSS圆角？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！