為什麼我的 Safari 中的圓角不正確，如何修復它們？

圓角（邊框半徑）Safari 問題解釋

使用 CSS 透過 border-radius 屬性建立圓角時，Safari 中可能會出現意外問題。當嘗試將圖像轉換為帶有邊框的圓形時，這個問題尤其明顯。

在 Safari 中，瀏覽器根據元素的外邊界（包括任何邊框）計算邊框半徑，而不是根據元素的外邊界計算邊框半徑。圖像本身。

為了說明這一點，請考慮一個邊框為 3px 的圖像 (100px x 100px)，這會導致元素大小為 106px x 106 像素。在此元素中添加 20% 的邊框半徑將從元素的外邊緣裁剪圖像，並在其周圍留下白色區域。

這種行為在較高的邊框半徑值（例如 50）下變得更加明顯%) 並且當邊框顏色設定為白色時。

要在Safari 中解決此問題，需要對圖像和容器都應用border-radius element:

<div class="activity_rounded">
  <img src="http://placehold.it/100" />
</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中文網其他相關文章！