Warum unterbricht ein transparenter Rand meinen Verlaufshintergrund und wie kann ich das beheben?

Rand überläuft Hintergrund mit Farbverlauf

Beim Hinzufügen eines transparenten Rahmens zu einem Element mit einem Hintergrund mit linearem Farbverlauf können unerwartete Effekte auftreten. Die linke und rechte Seite weisen möglicherweise falsche Farben und ein flaches Erscheinungsbild auf.

Ursache

Der Farbverlauf erstreckt sich bis zu den Rändern des Füllfelds, während der Rand gezeichnet wird außerhalb dieses Bereichs. Diese Ungleichheit führt zu einer unerwünschten Optik.

Lösung

Um dieses Problem zu beheben, sollten Sie die Verwendung von box-shadow:inset anstelle von border in Betracht ziehen. box-shadow:inset wird innerhalb der Padding-Box gerendert und ahmt den Effekt eines Rahmens nach, ohne das Erscheinungsbild des Hintergrunds zu beeinträchtigen.

Überarbeitetes CSS:

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

Hinweis: Da Box-Shadow keinen Platz einnimmt, passen Sie die Polsterung an entsprechend.

Abbildung:

[Bild der Abbildung der Füllbox und der Randbox hier]

Demo:

http://jsfiddle.net/ilpo/fzndodgx/5/

Das obige ist der detaillierte Inhalt vonWarum unterbricht ein transparenter Rand meinen Verlaufshintergrund und wie kann ich das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!