iframe 的圆角在 Safari 中不起作用

Question

So, I know that border-radius doesn't really work on an iframe itself, but what you can do to get a similar effect is to wrap that iframe in a div , and set the border-radius on the div itself, like so:

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

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

This, however, doesn't seem to work in Safari, and I couldn't find any other recent workarounds (the few questions/answers about this on SO are pretty outdated by now). Is there a clean solution to this for Safari?

Answer 1

What exactly doesn't work? I have tested it in Safari but it seems to be working.

<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

Try adding: overflow: hidden to the "wrapper" and

 width: 100%;
 height: 100%;

To the modal-iframe . Then you can change the height using the "wrapper".

 .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

Apply the border-radius to the iframe instead

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

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

Answer 4

I know this question is old but I ran into this today and none of the above solutions worked. This is what ended up working for me. I had to add the webkit mask image to the iframe wrapper.

    .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 property also worked for me.

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