Warum verzerren transparente Ränder Hintergrundhintergründe in CSS?

Transparente Randverzerrung bei Hintergründen mit Farbverlauf

In CSS kann das Anwenden eines transparenten Rahmens auf ein Element mit einem Hintergrund mit linearem Farbverlauf zu ungewöhnlichen Problemen führen Effekt, bei dem die linken und rechten Kanten des Elements eine verzerrte oder abgeflachte Färbung aufweisen.

Dies geschieht, weil sich die Start- und Endpunkte des Farbverlaufs befinden an den Rändern der Füllbox, während der Rand außerhalb davon gerendert wird. Folglich erscheint der Rand optisch verzerrt, da der Hintergrund auf beiden Seiten des Füllfelds wiederholt wird, um das Randfeld auszufüllen.

Ursache der Verzerrung

Die Der Grund für diese Verzerrung liegt in der Art und Weise, wie der Browser das CSS-Box-Modell interpretiert. Die Padding-Box bestimmt den Bereich, in dem der Inhalt des Elements platziert wird, während die Border-Box die Padding-Box und den Rand umfasst. Im gegebenen Szenario ist der Verlaufshintergrund im Füllfeld enthalten, aber der transparente Rand erstreckt sich über seine Grenzen hinaus.

Lösung

Um dieses Problem zu beheben, eine kann eine CSS-Eigenschaft namens „box-shadow: inset“ verwenden. Im Gegensatz zu einem Rahmen wird ein eingefügter Box-Schatten innerhalb der Füllbox gerendert und sorgt so für einen optisch ähnlichen Effekt wie ein Rahmen, ohne dass es zu Verzerrungen kommt.

Durch Ersetzen des Rahmens durch die folgende Box-Shadow-Eigenschaft wird das gewünschte Erscheinungsbild erzielt kann erreicht werden:

box-shadow: inset 0 0 0 10px rgba(0,0,0,0.2);

Da außerdem ein Kastenschatten nicht wie ein Rand Platz einnimmt, ist es notwendig, die Polsterung zu erhöhen entsprechend.

Abbildung

Das folgende Diagramm veranschaulicht den Unterschied zwischen Padding-Box und Border-Box:

[Bild von Padding-Box und border-box]

Demonstration

Eine interaktive Demonstration der Lösung kann finden Sie unter: http://jsfiddle.net/ilpo/fzndodgx/5/

Das obige ist der detaillierte Inhalt vonWarum verzerren transparente Ränder Hintergrundhintergründe in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!