在父 div 上设置边框半径修剪图像角在 Safari 中不起作用

Posted 2023-03-05

【中文标题】在父 div 上设置边框半径修剪图像角在 Safari 中不起作用

【英文标题】：Trimming image corners with border-radius set on parent div doesn't work in Safari

【发布时间】：2013-05-09 07:35:22

【问题描述】：

我在一个 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

【问题讨论】：

相关并帮我找到解决方案（直接修改img）：***.com/q/15167545/1066234 using CSS object-fit:cover;

【参考方案1】：

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

【讨论】：

如此简单的解决方案！谢谢！

【参考方案2】：

您使用的 Safari 版本是什么？

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

您正在使用position:absolute; 取出<img /> 的内容流。 通过这样做，您还应该将其显示属性更改为阻止。那么在img 上也设置border-radius 是有意义的。

见http://jsfiddle.net/Volker_E/LgYrz/ 注意：在非常旧的 Webkits (Safari -webkit-border-radius is necessary

【参考方案3】：

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

顺便说一句，您可以使用 HTML5 figure 标签来包含图像——我已经有一段时间没有在多个浏览器中测试它了，但上次我仍然需要在旧版 Firefox 中使用双 border-radius 解决方法.