iPhone端Safari浏览器图片轮廓穿透圆角边框问题求助

嘿，这个问题我之前帮好几个开发者排查过，确实是iPhone Safari独有的渲染小坑——图片的边缘会突破父元素的圆角边框显示出来，看着特别别扭。

常见的几种修复方案，你可以挨个试试： #

• 方案1：给父元素添加-webkit-mask-image强制裁剪
  Safari有时候对overflow:hidden+border-radius的组合渲染逻辑有点问题，用-webkit-mask-image可以强制让父元素的圆角生效，把超出的部分裁掉：

  .round-img {
    border-radius: 你的圆角值; /* 比如50%或者10px，根据你的需求来 */
    overflow: hidden;
    /* 关键修复代码 */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
  }
  

• 方案2：给图片本身设置相同的圆角
  有时候父元素的圆角没有正确作用到内部的图片上，直接给img标签继承父元素的圆角就能解决：

  .round-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保证图片填充容器，避免拉伸变形 */
    border-radius: inherit; /* 直接继承父元素的圆角值 */
  }
  

• 方案3：调整父元素的堆叠上下文
  偶尔层级渲染的问题也会导致这个现象，给父元素加position: relative和z-index试试：

  .round-img {
    border-radius: 你的圆角值;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  

如果单个方案没效果，可以试试把方案1和方案2组合起来用，基本就能解决这个问题了。

内容的提问来源于stack exchange，提问作者TommyGunn32