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

Question

我在一个 div 中放置了一个图像，该 div 具有圆 Angular ，用作 mask 以隐藏图像 Angular 并将其显示为圆形。它适用于除 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;
}

fiddle

Answer 1

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