Pourquoi une bordure transparente sur un dégradé linéaire provoque-t-elle un échange et un aplatissement des couleurs ?

Transparence sur fond dégradé : enquête sur un effet de bordure étrange

Lors de l'ajout d'une bordure transparente à un élément avec un arrière-plan dégradé linéaire, un un phénomène inhabituel se produit. Les couleurs le long des bords gauche et droit semblent incorrectes, comme si elles avaient été inversées. De plus, ces sections présentent une apparence aplatie.

Fragment HTML :

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

Configuration CSS :

.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);
}

Cause de l'effet :

Ce problème se produit car le les points de début et de fin du dégradé sont positionnés sur les bords de la boîte de remplissage. Cependant, la bordure est tracée à l'extérieur de la zone de remplissage. Étant donné que l'arrière-plan se répète de chaque côté de la bordure, la bordure apparaît particulière.

Solution Utilisation de l'ombre de la boîte :

Pour reproduire l'effet visuel d'une bordure sans ce problème, pensez à utiliser un box-shadow :

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

Comme un box-shadow n'occupe pas de place, il est essentiel d'ajuster le padding en conséquence.

Diagramme de la Padding-Box et de la Border-Box :

[Image de la padding-box et de la border-box]

Démo en direct :

Explorez le comportement corrigé dans ce JSFiddle : http://jsfiddle.net/ilpo/fzndodgx/5/

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!