Warum werden kreisförmige Bilder in Safari beschnitten und wie kann ich das Problem beheben?

Abgerundete Ecken (Randradius) in Safari

Bei der Verwendung des Randradius können Probleme auftreten, insbesondere in Safari, wenn Sie versuchen, kreisförmige Bilder zu erstellen.

In Safari wird ein Bild, dem ein Randradius zugewiesen ist, vom äußeren Rand des Elements und nicht vom Bild selbst abgeschnitten. Dies wird deutlich, wenn sich das Bild in einem Container befindet, dessen Hintergrundfarbe sich von der des Bildes unterscheidet.

Um dieses Problem zu beheben, trennen Sie den Rahmen vom Bild, indem Sie das Bild in einen Container platzieren. Wenden Sie anschließend den Randradius sowohl auf das Bild als auch auf den Container an.

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

Dadurch wird sichergestellt, dass sowohl das Bild als auch der Rand abgerundete Ecken haben, was in Safari zu einem kreisförmigen Rand um das Bild führt.

Das obige ist der detaillierte Inhalt vonWarum werden kreisförmige Bilder in Safari beschnitten und wie kann ich das Problem beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!