Safari 浏览器不支持圆形头像的 CSS

Question

我的博客使用的是 gatsby React 模板，但是当我在 Safari 浏览器（iPhone 或 Mac）上打开它时，头像图像不是圆形的。 简单代码博客

这是我用于头像的样式

.bio-avatar {
  margin-right: var(--spacing-4);
  margin-bottom: var(--spacing-0);
  min-width: 50px;
  border-radius: 100%;
 }

Answer 1

您应该用这个更改您的 CSS 代码。问题在于 border-radius 值。

.bio-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
}