Question

我正在尝试包含带有圆边的iframe - 我的解决方案在IE9，FF，Chrome中运行良好，但在Safari中无效。有任何方式（JS，CSS等）有iframe圆边吗？目前我有以下代码：

.somediv iframe{
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -khtml-border-radius: 20px;
  border-radius: 20px;
}

提前致谢

Answer 1

如果直接的父母是圆角，你最好给.somediv。在角色中，圆角确实适用于div。

Answer 2

圆角确实适用于Safari中的div ...但是如果添加iframe则不行。请查看下面的代码 - 它在任何浏览器中都不起作用...... 但如果你改变：

<div class="somediv" >
    <iframe class="" ...>

到

<div class="" >
    <iframe class="somediv" ...>

然后将在chrome，ff和ie9中工作，但仍然不在safari中......

代码：

<html>
<head>
  <style>
    .somediv {
      -moz-border-radius: 20px;
      -webkit-border-radius: 20px;
      -khtml-border-radius: 20px;
      border-radius: 20px;
      border: 2px solid red;
      height: 225px;
      width: 400px;
    }
  </style>
</head>
<body>
  <div class="somediv" >
    <iframe class="" width="400" height="225" frameborder="0" src="http://player.vimeo.com/video/30239097?title=0&amp;byline=0&amp;portrait=0">
    </iframe>
  </div>
</body>
</html>

Answer 3

尝试将border-radius放在包装器div 上，也在其上设置overflow:hidden。没试过，但它可以工作。

Answer 4

我想你可以这样做来解决这个问题。在两者上放置相同的课程。

<html>
<head>
  <style>
    .somediv {
      border-radius: 50%;
      width: 400px;
      height: 400px;
    }
  </style>
</head>
<body>
  <div class="somediv" >
    <iframe class="somediv" width="400" height="400" frameborder="0" src="http://player.vimeo.com/video/30239097?title=0&amp;byline=0&amp;portrait=0">
    </iframe>
  </div>
</body>
</html>

Safari中的iframe中的CSS圆角

4 个答案: