為什麼在 Safari 中使用'border-radius”時我的圖像會被裁剪？

Safari 圓角問題

使用 border-radius 在影像上建立圓角時，Safari 可能會表現出不穩定的行為。這是因為瀏覽器的渲染引擎在計算圓角時會考慮圖像和任何周圍的邊框，從而導致不必要的裁剪。

理解問題

讓我們使用 100 像素 x 100 像素的圖像說明問題。增加 3px 邊框會將元素尺寸增加到 106px x 106px。現在，套用 20% 的邊框半徑會導致從元素的外邊界而不是從影像本身裁切角落。

解決方案：分離影像和邊框

要在 Safari 中解決此問題，我們必須確保影像和邊框都有圓角。實現此目的的一種方法是使用容器元素將邊框與映像分開，對容器和映像套用邊框半徑。

範例

< ;div>

CSS:

.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 中使用'border-radius”時我的圖像會被裁剪？的詳細內容。更多資訊請關注PHP中文網其他相關文章！