Warum funktioniert der Randradius bei Bildern in Chrome nicht?

CSS-Randradius wird nicht auf Bilder im Webkit angewendet

Es gibt Probleme beim Anwenden des Randradius auf das #screen-Element in Chrome, aber nicht in anderen Browsern ? Dieses Problem ist wahrscheinlich auf einen Fehler in der Handhabung des Bildzuschneidens durch Chrome zurückzuführen.

Das #screen-Element verwendet CSS, um ein Hintergrundbild mit abgerundetem Randradius festzulegen:

#screen {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

Allerdings in Chrome scheint das Bild von der Eigenschaft border-radius nicht betroffen zu sein.

Problemumgehung

Um diesen Fehler zu beheben, ist eine Problemumgehung verfügbar:

.element-that-holds-pictures {
    perspective: 1px;
}

Das Anwenden der Perspektive auf das übergeordnete Element, das die Bilder enthält, zwingt Chrome dazu, den Randradius korrekt anzuwenden, ohne die Bildqualität zu verzerren. Diese Problemumgehung hat im Gegensatz zu anderen Alternativen wie opacity:0.99.

keine Auswirkungen auf die Anzeige

Das obige ist der detaillierte Inhalt vonWarum funktioniert der Randradius bei Bildern in Chrome nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!