图像裁剪父元素的边框半径？ （苹果浏览器）

Posted 2023-03-23

【中文标题】图像裁剪父元素的边框半径？ （苹果浏览器）

【英文标题】：Image Clipping Parent Element's Border-Radius? (Safari)

【发布时间】：2018-07-30 05:29:41

【问题描述】：

是什么导致图像剪切父元素的border-radius？图像和父元素都应用了border-radius: 50%，但它仍然会导致剪辑发生。

这是我在 Safari 中面临的问题：

据我所知，这似乎是 Safari 特有的问题。有什么意见吗？

body 
  margin: 0;
  padding: 0;
  border: 0;


#photo-container 
  box-sizing: border-box;
  padding: 40px 25% 20px;
  line-height: 0;
  margin: 0;


#photo-container a 
  border: 2px solid blue;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  padding: 5px;
  display: block;
  box-sizing: border-box;


img#photo 
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  border: 0;
  padding: 0;

<div id="photo-container">
  <a id="#">
    <img id="photo" src="http://freedesignfile.com/upload/2018/02/most-beautiful-scenery-of-nature-Stock-Photo-04.jpg">
  </a>
</div>

【问题讨论】：

如果您尝试创建一个空的 DIV 并将图像设置为背景，然后查看该 div 上的边框半径是否会产生相同的问题。

试过你的建议，没有成功。我觉得应该有一个简单的解决方案，但也许这是 Safari 中的一个错误？

不确定您所说的“没有成功”是什么意思。这看起来不像 Safari 中带有圆圈的图像吗？ jsfiddle.net/jsbd8zd7

@Alexus，感谢您的反馈，尽管我在这里找到了解决方案：***.com/a/48877520/9214076。

【参考方案1】：

找到了解决办法。将-webkit-backface-visibility: hidden; 和-moz-backface-visibility: hidden; 应用于img#photo 解决了边框剪裁问题。

img#photo 
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  border: 0;
  padding: 0;

【参考方案2】：

最初加载页面时，它会显示轻微的重叠错误，直到页面完全加载，然后它在我的 safari 中正确加载。

如果您仍然遇到问题，我可以提出的唯一建议是将box-sizing: border-box; 也添加到#photo-container a。

至于为什么会发生，这就是为什么：

Safari 似乎无法正确裁剪图像。因此，即使图像不可见，容器的边框也会被图像覆盖。我测试了几个不同的东西，比如缩小图像的大小等，并且在多个阶段都遇到了类似的问题，所以这不太可能是你可以 100% 解释的问题。

【讨论】：

感谢您的意见，但即使将box-sizing: border-box 应用于#photo-container a，问题仍然存在。

那么，这会被认为是浏览器显示错误吗？