在移动设备上使用轮廓偏移的圆形照片

Question

我很困惑，需要一些帮助。我写了 CSS 来使照片变圆，将 1px 的细轮廓设置为偏移 -12px，并出现在照片内部。这适用于桌面设备，但 outline radius 不会继承 border-radius: 50% 在移动设备上。关于我做错了什么或如何解决的任何建议。

.round-photo {
  width:400px;
  height:400px;
  margin: auto;
}
.round-photo img {
  width:100%;
  height:inherit;
  border-radius: 50% !important;
  outline: solid 1px white;
  outline-offset: -12px;
}

<div class="round-photo">
  <img src="https://placeimg.com/640/480/people">
</div>

Here is what I am trying to get my photos to look like when viewing on mobile devices. Where the outline-offset appears inside the image and retains the 50% radius - forming a complete circle inside the photo.

However this is what my image looks like in Brave/Chrome on an Apple iPhone 8

And this is what my image looks like in Duck Duck Go on an Apple iPhone 8

And here is what my image looks like in Safari on an Apple iPhone 8

Answer 1

你可以尝试这样的事情。已经创建了一个codepen。让我知道这是否适合你？

https://codepen.io/_makki/pen/JjOYJgL

.round-photo {
    width: 400px;
    height: 400px;
    margin: auto;
    border-radius: 100%;
    overflow: hidden;
    position: relative;
}
.round-photo:after {
    content: "";
    position: absolute;
    border: 1px solid white;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
    border-radius: 100%;
}
.round-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

在移动设备上使用轮廓偏移的圆形照片

Round photos with outline-offset on mobile devices

css

outline

border-radius