23

我在 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;
}

小提琴

4

3 回答 3

67

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

于 2013-07-16T22:36:27.397 回答
0

您使用的是哪个 Safari 版本？

对该问题的几个（不令人满意的）解释： 如何使 CSS3 圆角在 Chrome/Opera 中隐藏溢出

您正在<img />使用position:absolute;. 通过这样做，您还应该将其显示属性更改为阻止。然后把边界半径也放在上面是有意义的img。

请参阅http://jsfiddle.net/Volker_E/LgYrz/
注意：在非常旧的 Webkits (Safari < 5.0) -webkit-border-radius上是必要的

于 2013-05-15T00:22:11.110 回答
0

另一个简单的解决方法是将border-radius属性也添加到img标记中，并为其赋予相同的值。

顺便说一句，您可以使用 HTML5figure标记来包含图像——我已经有一段时间没有在超过几个浏览器中测试它了，但是上次我这样做仍然需要border-radius在旧版 Firefox 中使用双重解决方法。

于 2015-08-22T17:08:42.543 回答