CSS向IFrame添加边框半径 [英] CSS adding border radius to an IFrame

问题描述

向IFrame添加边框并不重要 - 您可以这样做：

Adding a border to an IFrame is no biggie - you do it like this e.g.:

  border: 4px solid #000;
  -moz-border-radius: 15px;
  border-radius: 15px;

问题是当您将内容加载到该IFrame时，内容会覆盖边角的边框，像这样：

The problem is that when you load content to that IFrame, the content overlaps the borders in the corners, like so:

任何想法如何超越这个问题？例如。是有一个JavaScript库，会照顾这个...

Any ideas how one might get past this issue? E.g. is there a JavaScript library that would take care of this...

推荐答案

边框半径不是很好的支持或一致。如果你想要的效果，尝试使用DIV的元素周围，并使用图形，而在CSS中有一个隐藏的溢出。

Border radius isn't well supported or consistent yet. If you want the desired affect, try using DIV's around the element and use graphics instead, with an overflow of hidden in your CSS. You might want to look into the sliding doors tehnique if your iframe varies in height.

http://www.alistapart.com/articles/slidingdoors/

希望这有帮助。

祝你好运！

这篇关于CSS向IFrame添加边框半径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！