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

fiddle

Answer 1

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

Answer 2

您使用的Safari版本是什么？

对该问题的几个（不满意的）解释： How to make CSS3 rounded corners hide overflow in Chrome/Opera

您正在使用<img />取出position:absolute;内容流。通过这样做，您还应该将其display属性更改为block。然后将border-radius放在img上也是有意义的。

见http://jsfiddle.net/Volker_E/LgYrz/
注意：在非常旧的Webkits（Safari＆lt; 5.0）-webkit-border-radius is necessary

上

Answer 3

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

顺便说一句，您可以使用HTML5 figure标记来包含图片 - 我已经在一些浏览器中测试了一段时间但是上次我做了它还需要双border-radius解决方法在较旧的Firefox中。

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

3 个答案: