Question

我最近发现Google Chrome存在问题：点击游戏后，带有圆角的iframe会丢失。

查看我从本网站的另一个答案得到的这个小提琴。

.wrapper         {width:80%; max-width: 600px; height:100%; margin:0 auto; background:#CCC}
.h_iframe        {position:relative; padding-top: 56%;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}


iframe{
  border: 1px sold black;
  border-radius:50px;
}

<div class="wrapper">
    <div class="h_iframe">
        <iframe height="400" width="2" src="http://www.youtube.com/embed/WsFWhL4Y84Y" frameborder="0" allowfullscreen></iframe>
    </div>
    <p>Please scale the "result" window to notice the effect.</p>
</div>

点击播放，您会注意到圆形边框如何恢复正常。 Edge或Firefox不会发生这种情况。有办法解决这个问题吗？

Answer 1

我找到了答案：在我的代码中使用包装类在div中使用此属性：

-webkit-mask-image：-webkit-radial-gradient（white，black）;

希望这也有助于其他人。

如何在Chrome中点击后保留iframe的圆角

1 个答案: