Warum sind meine abgerundeten Ecken in Safari falsch und wie kann ich sie beheben?

Safari-Problem mit abgerundeten Ecken (Randradius) erklärt

Beim Verwenden von CSS zum Erstellen abgerundeter Ecken mit der Eigenschaft „Border-Radius“ kann in Safari ein unerwartetes Problem auftreten. Dieses Problem tritt besonders deutlich auf, wenn versucht wird, ein Bild in einen Kreis mit Rand umzuwandeln.

In Safari berechnet der Browser den Randradius basierend auf der äußeren Grenze des Elements, einschließlich etwaiger Ränder, und nicht auf der Grundlage Bild selbst.

Um dies zu veranschaulichen, betrachten Sie ein Bild (100 Pixel x 100 Pixel) mit einem Rand von 3 Pixeln, was zu einer Elementgröße von 106 Pixel x führt 106px. Wenn Sie diesem Element einen Randradius von 20 % hinzufügen, wird das Bild vom äußeren Rand des Elements abgeschnitten, sodass ein weißer Bereich um das Element herum verbleibt.

Dieses Verhalten wird bei höheren Randradiuswerten (z. B. 50) noch deutlicher %) und wenn die Randfarbe auf Weiß eingestellt ist.

Um dieses Problem in Safari zu beheben, ist es notwendig, den Randradius sowohl auf das Bild als auch auf den Container anzuwenden 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;
}

Diese Trennung stellt sicher, dass der Randradius sowohl auf das Bild als auch auf das umgebende Element korrekt angewendet wird, was in Safari zu einem kreisförmigen Rand um das Bild führt.

Das obige ist der detaillierte Inhalt vonWarum sind meine abgerundeten Ecken in Safari falsch und wie kann ich sie beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!