為什麼圓形圖像在 Safari 中被裁剪以及如何修復？

Safari 中的圓角（邊框半徑）

使用邊框半徑時可能會遇到問題，尤其是在 Safari 中嘗試建立圓形影像時。

在 Safari 中，指定了邊框半徑的圖像是從元素的外邊界而不是圖像本身裁剪的。當影像位於背景顏色與影像不同的容器中時，這種情況會變得明顯。

要解決此問題，請將影像放置在容器內，將邊框與影像分開。然後，對圖像和容器套用邊框半徑。

<div class="activity_rounded">
  <img  src="/static/imghwm/default1.png" data-src="http://placehold.it/100" class="lazy" alt="為什麼圓形圖像在 Safari 中被裁剪以及如何修復？" >
</div>

.activity_rounded {
  display: inline-block;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -khtml-border-radius: 50%;
  border: 3px solid #fff;
}

.activity_rounded img {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -khtml-border-radius: 50%;
  vertical-align: middle;
}

這可確保影像和邊框都有圓角，從而在 Safari 中影像周圍形成圓形邊框。

以上是為什麼圓形圖像在 Safari 中被裁剪以及如何修復？的詳細內容。更多資訊請關注PHP中文網其他相關文章！