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;
}