Warum führt ein transparenter Rand auf einem linearen Farbverlauf zu Farbvertauschungen und Abflachungen?

Transparenz über Hintergrund mit Farbverlauf: Untersuchung eines seltsamen Randeffekts

Beim Hinzufügen eines transparenten Rahmens zu einem Element mit einem Hintergrund mit linearem Farbverlauf wird ein Es kommt zu einem ungewöhnlichen Phänomen. Die Farben am linken und rechten Rand erscheinen falsch, als ob sie vertauscht worden wären. Darüber hinaus weisen diese Abschnitte ein abgeflachtes Erscheinungsbild auf.

HTML-Fragment:

<div class="colors"></div>

CSS-Konfiguration:

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

Ursache des Effekts:

Dieses Problem tritt aufgrund des Farbverlaufs auf Start- und Endpunkte werden an den Rändern der Füllbox positioniert. Der Rand wird jedoch außerhalb des Füllfelds gezeichnet. Da sich der Hintergrund auf jeder Seite über den Rahmen hinweg wiederholt, erscheint der Rand eigenartig.

Lösung mit Box-Shadow:

Um den visuellen Effekt eines Rahmens zu reproduzieren Ohne dieses Problem sollten Sie die Verwendung eines Box-Shadow in Betracht ziehen:

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

Da ein Box-Shadow keinen Platz einnimmt, ist es wichtig, die Polsterung anzupassen entsprechend.

Diagramm von Padding-Box und Border-Box:

[Bild von Padding-Box und Border-Box]

Live-Demo:

Entdecken Sie das korrigierte Verhalten in dieser JSFiddle: http://jsfiddle.net/ilpo/fzndodgx/5/

Das obige ist der detaillierte Inhalt vonWarum führt ein transparenter Rand auf einem linearen Farbverlauf zu Farbvertauschungen und Abflachungen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!