iframe 的圆角在 Safari 中不起作用

Question

所以，我知道border-radius本身并不真正适用于iframe本身，但是你可以做些什么来获得类似的效果是将iframe包装在div中，然后在 div 本身上设置border-radius ，就像这样:

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

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

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

Answer 1

到底什么不起作用？ 我已经在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 2

尝试添加： 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 3

将border-radius应用于iframe

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

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

Answer 4

我知道这个问题很旧，但是今天我遇到了这个问题，上述解决方案均无效。 这就是最终为我工作的原因。 我必须将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 5

clip-path CSS 属性也对我有用。

clip-path: inset(0% 0% 0% 0% round 10px);