Safari浏览器中图片outline显示为正方形的问题求助

问题重现 #

使用border-radius:50%实现圆形图片并搭配outline添加实心轮廓时，Chrome能正常显示圆形轮廓，但Safari中轮廓会呈现为正方形。

原代码：

.iconObjBig {
  border-radius: 50%;
}

<div class="personPortraitContainer">
  <img src="https://picsum.photos/200" class="iconObjBig" style="outline: 1.5rem solid rgba(154, 173, 184, 0.2); margin: 100px;">
</div>

解决方案 #

方案1：用box-shadow替代outline #

box-shadow的扩展半径参数可以模拟实心轮廓效果，且Safari支持它跟随border-radius进行圆角适配：

.iconObjBig {
  border-radius: 50%;
  /* 0 0 0 扩展半径 颜色，模拟实心轮廓 */
  box-shadow: 0 0 0 1.5rem rgba(154, 173, 184, 0.2);
}

<div class="personPortraitContainer">
  <img src="https://picsum.photos/200" class="iconObjBig" style="margin: 100px;">
</div>

方案2：通过容器实现圆角边框 #

将图片放入容器，给容器设置圆角和边框，图片自适应容器尺寸：

.personPortraitContainer {
  border-radius: 50%;
  border: 1.5rem solid rgba(154, 173, 184, 0.2);
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.iconObjBig {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="personPortraitContainer" style="margin: 100px;">
  <img src="https://picsum.photos/200" class="iconObjBig">
</div>

原因说明 #

Safari的outline属性不会跟随元素的border-radius进行圆角裁剪，属于浏览器兼容性差异。上述两种方法通过替代属性或容器嵌套的方式，绕过了这个限制。

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