CSS - 具有图像边框半径的跨浏览器内边框

Question

我有一个绝对定位的图像（大小是使用

max-width

响应确定的），我想向其添加 inner 边框。因为它是图像，所以我既不能使用伪元素（因为

img

元素没有它们），也不能使用

box-shadow

（因为阴影渲染在图像后面，而不是顶部）。

所以我使用的方法是

outline

与

outline-offset

的结合。这适用于我测试过的大多数浏览器。然而，我在 iOS/Safari 上遇到了一个问题，轮廓的角被切断而不是被圆化。

iOS：

其他浏览器：

考虑这个例子：

.wrapper{
  position: relative;
  width: 400px;
}
img{
  position: absolute;
  max-width: 100%;
  border-radius: 20px;
  outline: 4px solid red;
  outline-offset: -4px;
}

The following example works in most browsers, but not iOS Safari and perhaps some other browsers.

<div class="wrapper">
  <img src="https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg">
</div>

由于绝对定位和响应式大小调整，我可能也无法将图像包装在另一个元素中。如果有人对如何解决该问题有任何想法，我们将不胜感激。