Html 使用在父div上设置的边框半径修剪图像角点不'；我不在野生动物园工作

我有一个图像放在一个div里面，div有圆角，它作为一个遮罩来隐藏图像的角并显示为一个圆。它在除Safari之外的所有浏览器中都能工作！有人知道怎么修吗

我尝试了

-webkit padding box

，

-webkit mask box image

，但都不起作用

HTML:

---

您使用的Safari版本是什么

对该问题的几种（不令人满意的）解释：

您使用

位置取出
的内容流：绝对。
通过执行此操作，还应将其“显示”属性更改为“块”。然后将边界半径也设置在
img
上是有意义的

见

注意：在非常旧的WebKit（Safari<5.0）
上，最好的解决方法是指定
溢出：隐藏。
另一个简单的解决方法是将
border radius
属性也添加到
img
标记中，并赋予它相同的值

顺便说一句，你可以使用HTML5
figure
标签来包含图像-我已经有一段时间没有在多个浏览器中测试过它了，但上次我测试时，它仍然需要在旧版Firefox中使用双
边框半径
解决方案。
多么简单的解决方案！非常感谢。相关并帮助我找到解决方案（直接修改img）：使用CSS
objectfit:cover
<div class="cat"><img src="images/colorful-flowers-hd-wallpaper.jpg" /></div>

.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;
}