Warum werden meine Bilder beschnitten, wenn ich „border-radius' in Safari verwende?

Problem mit abgerundeten Ecken bei Safari

Beim Verwenden von border-radius zum Erstellen abgerundeter Ecken auf Bildern kann Safari unregelmäßiges Verhalten zeigen. Dies liegt daran, dass die Rendering-Engine des Browsers bei der Berechnung der abgerundeten Ecken sowohl das Bild als auch alle umgebenden Ränder berücksichtigt, was zu unerwünschtem Zuschneiden führt.

Das Problem verstehen

Lassen Sie uns Veranschaulichen Sie das Problem mit einem Bild von 100 x 100 Pixel. Durch das Hinzufügen eines 3-Pixel-Rahmens erhöhen sich die Elementabmessungen auf 106 x 106 Pixel. Wenn Sie nun einen Randradius von 20 % anwenden, werden die Ecken vom äußeren Rand des Elements abgeschnitten und nicht vom Bild selbst.

Lösung: Bild und Rand trennen

Um dieses Problem in Safari zu beheben, müssen wir sicherstellen, dass sowohl das Bild als auch der Rahmen abgerundete Ecken haben. Eine Möglichkeit, dies zu erreichen, besteht darin, den Rand mithilfe eines Containerelements vom Bild zu trennen und den Randradius sowohl auf den Container als auch auf das Bild anzuwenden.

Beispiel

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

Dieser Ansatz stellt sicher, dass sowohl das Bild als auch der Rahmen abgerundete Ecken haben, was zu ein einheitliches Erscheinungsbild in allen Browsern.

Das obige ist der detaillierte Inhalt vonWarum werden meine Bilder beschnitten, wenn ich „border-radius' in Safari verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!