使用在父 div 上设置的 border-radius 修剪图像角在 Safari 中不起作用

Question

我在一个 div 中放置了一个图像，该 div 具有圆角，用作遮罩以隐藏图像角并将其显示为一个圆圈。它适用于除 Safari 之外的所有浏览器！有谁知道如何解决它？

我尝试 -webkit-padding-box ， -webkit-mask-box-image 但两者都没有用。

HTML:

 <div class="cat"><img src="images/colorful-flowers-hd-wallpaper.jpg" /></div>

CSS：

 .cat{
    width: 128px;
    height: 128px;
    margin: 20px 96px 0px 96px;
    position: relative;
    float: left;
    border-radius: 50%;
    overflow: hidden;
    border-top: 1px solid #111;
    border-bottom: 1px solid #fff;
    background: #fff;
    -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
}

.cat img{
    position: absolute;
    border: none;
    width: 138px;
    height: 138px;
    top: -8px;
    left: -8px;
    cursor: pointer;
}

小提琴

原文由 razz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

解决此问题的最佳方法是在父元素上指定 overflow: hidden; 。

原文由 DavidVII 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是因为父元素应用了 border-radius 但图像没有任何应用。图像试图溢出并因此覆盖应用于父元素的 border-radius 。

简单的解决方案：

除了在父元素上设置 border-radius 之外，你还需要在 img 标签中添加如下CSS规则：

 img {
   border-radius: inherit;
}

警告：

如果您的图片加载不正确，但您仍希望应用 border-radius，则上述方法可能不起作用，您可能必须在父元素上使用以下 CSS 规则：

 div {
   overflow: hidden;
}

请注意 overflow: hidden 必须谨慎使用，因为它可能会干扰您可能拥有的与父元素有关的其他伪元素。

原文由 Srishti Gupta 发布，翻译遵循 CC BY-SA 4.0 许可协议