Warum verzerrt ein transparenter Rand einen Hintergrund mit Farbverlauf und wie kann ich das beheben?

Transparente Randverzerrung auf Hintergrund mit Farbverlauf

Das Anwenden eines transparenten Rahmens auf ein Element mit einem Hintergrund mit linearem Farbverlauf kann zu einem besonderen visuellen Effekt führen wo die Kanten des Elements verzerrt oder „flach“ erscheinen. Dies liegt daran, dass sich der Farbverlauf über das Füllfeld hinaus in das Rahmenfeld erstreckt, wodurch der Rahmen die Farben beeinträchtigt.

Ursache des Effekts

Das Problem ergibt sich aus der unterschiedlichen Renderreihenfolge von Farbverlauf und Rand. Der Farbverlauf wird innerhalb der Füllbox gezeichnet, während der Rand außerhalb der Füllbox gerendert wird. Infolgedessen überlappen sich die Ränder mit dem Farbverlauf, wodurch der unerwünschte Effekt entsteht.

Lösung: Stattdessen Box Shadow verwenden

Um dies zu korrigieren, sollten Sie die Verwendung von Box-Shadow in Betracht ziehen: Einschub anstelle eines Randes. Box-Shadow wird innerhalb der Padding-Box gerendert, ähnlich dem Farbverlauf, wodurch das Überlappungsproblem beseitigt wird.

Codebeispiel

.colors {
    width: 100px;
    height: 50px;
    background: linear-gradient(
        to right,
        #78C5D6,
        #459BA8,
        #79C267,
        #C5D647,
        #F5D63D,
        #F08B33,
        #E868A2,
        #BE61A5
    );
    box-shadow: inset 0 0 0 10px rgba(0, 0, 0, 0.2);
    padding: 10px;
}

Vorteile der Verwendung Box Shadow

Die Verwendung von Box-Shadow bietet mehrere Vorteile:

• Es erzeugt den gleichen visuellen Effekt wie ein Rahmen, ohne die Hintergrundwiedergabe zu beeinträchtigen.
• Box-Shadow nimmt keinen physischen Platz ein, sodass Sie die Polsterung entsprechend anpassen können .

Geigendemonstration

Beziehen Sie sich auf die folgende Geige, um die Wirkung zu sehen Aktion: http://jsfiddle.net/ilpo/fzndodgx/5/

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