iframe 的圆角在 Safari 中不起作用

Question

所以，我知道这border-radius并不能真正适用于 aniframe本身，但是你可以做些什么来获得类似的效果是将它包装iframe在 a 中div，并border-radius在 div 本身上设置，如下所示：

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

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

但是，这在 Safari 中似乎不起作用，而且我找不到任何其他最近的解决方法（SO 上关于此的几个问题/答案现在已经过时了）。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/