Question

所以，我知道border-radius本身并不适用于iframe，但是你可以做些什么来获得类似的效果就是将iframe包裹在div中1}}，并在div本身上设置border-radius，如下所示：

<div class="modal-iframe-wrapper">
  <iframe class="modal-iframe"></iframe>
</div>

.modal-iframe-wrapper {
  overflow: hidden;
  border-radius: 8px;
}

然而，这似乎在Safari中不起作用，我找不到任何其他最近的解决方法（关于这个问题的几个问题/答案现在已经过时了）。对Safari来说，有一个干净的解决方案吗？

Answer 1

我知道这个问题很旧，但是今天我遇到了这个问题，上述解决方案均无效。这就是最终为我工作的原因。我必须将Webkit蒙版图像添加到iframe包装器中。

    .iframe-wrapper{
       //other css here
       border-radius: 10px;           
       -webkit-mask-image: -webkit-radial-gradient(white, black);
    }

   <div class="iframe-wrapper">
      <iframe></iframe>
   </div>

Answer 2

究竟什么不起作用？我在Safari中测试了它，但它似乎正在工作。

<div class="modal-iframe-wrapper">
 <iframe class="modal-iframe" src="https://example.com"></iframe>
</div>

.modal-iframe-wrapper {
 overflow: hidden;
 border-radius: 8px;
 width: 400px;
 height: 400px;
 background: red;
}
iframe { widith: 100%; height: 100%; border: 0; }

https://jsfiddle.net/jwb546k6/

Answer 3

尝试将“overflow: hidden添加到”包装器“和

 width: 100%;
 height: 100%;

致modal-iframe。然后你可以使用“包装器”来改变高度。

.modal-iframe-wrapper {
  overflow: hidden;
  border-radius: 8px;
  overflow: hidden;
  height: 500px;
  width: 500px;
}
.modal-iframe {
  width: 100%;
  height: 100%;
}

<div class="modal-iframe-wrapper">
  <iframe class="modal-iframe"></iframe>
</div>

Answer 4

将border-radius应用于iframe而不是

＆＃13;

.modal-iframe {
  border-radius: 8px;
}

＆＃13;

<div class="modal-iframe-wrapper">
  <iframe class="modal-iframe"></iframe>
</div>

＆＃13;

iframe的圆角不适用于Safari

4 个答案: