Pourquoi une bordure transparente déforme-t-elle un arrière-plan dégradé et comment puis-je y remédier ?

Distorsion de la bordure transparente sur fond dégradé

L'application d'une bordure transparente à un élément avec un arrière-plan dégradé linéaire peut entraîner un effet visuel particulier où les bords de l'élément semblent déformés ou « plats ». Cela se produit parce que le dégradé s'étend au-delà de la zone de remplissage jusqu'à la zone de bordure, provoquant une interférence de la bordure avec les couleurs.

Cause de l'effet

Le problème découle de l’ordre de rendu différent du dégradé et de la bordure. Le dégradé est dessiné à l'intérieur de la zone de remplissage, tandis que la bordure est rendue à l'extérieur de la zone de remplissage. En conséquence, les bordures se chevauchent sur le dégradé, créant un effet indésirable.

Solution : utiliser Box Shadow à la place

Pour remédier à cela, pensez à utiliser box-shadow : encart au lieu d'une bordure. L'ombre de la boîte est rendue dans la boîte de remplissage, similaire au dégradé, éliminant ainsi le problème de chevauchement.

Échantillon de code

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

Avantages de l'utilisation Box Shadow

L'utilisation de box-shadow offre plusieurs avantages :

• Il produit le même effet visuel qu'une bordure sans affecter le rendu de l'arrière-plan.
• Box-shadow ne prend pas d'espace physique, vous pouvez donc ajuster le remplissage en conséquence.

Démonstration de violon

Référez-vous au violon suivant pour voir l'effet en action : 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!