Pourquoi les bordures transparentes déforment-elles les arrière-plans dégradés en CSS ?

Distorsion de la bordure transparente avec un arrière-plan dégradé

En CSS, l'application d'une bordure transparente à un élément avec un arrière-plan dégradé linéaire peut provoquer un effet inhabituel effet où les bords gauche et droit de l'élément présentent une coloration déformée ou aplatie.

Cela se produit parce que les points de début et de fin du dégradé résident au bords de la boîte de remplissage, tandis que la bordure est rendue à l'extérieur de celle-ci. Par conséquent, la bordure apparaît visuellement déformée car l'arrière-plan est répété de chaque côté de la zone de remplissage pour remplir la zone de bordure.

Cause de la distorsion

La La raison de cette distorsion réside dans la façon dont le navigateur interprète le modèle de boîte CSS. La padding-box détermine la zone dans laquelle le contenu de l'élément est placé, tandis que la border-box englobe la padding-box et la bordure. Dans le scénario donné, l'arrière-plan dégradé est contenu dans la zone de remplissage, mais la bordure transparente s'étend au-delà de ses limites.

Solution

Pour résoudre ce problème, un peut utiliser une propriété CSS appelée "box-shadow: inset". Contrairement à une bordure, une ombre de boîte incrustée est rendue dans la zone de remplissage, fournissant un effet visuellement similaire à une bordure sans provoquer de distorsion.

En remplaçant la bordure par la propriété box-shadow suivante, l'apparence souhaitée peut être réalisé :

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

De plus, comme une ombre de boîte n'occupe pas d'espace comme une bordure, il est nécessaire d'augmenter le remplissage en conséquence.

Illustration

Le diagramme suivant illustre la différence entre la padding-box et la border-box :

[Image de padding-box et border-box]

Démonstration

Une démonstration interactive du la solution peut être trouvée sur : 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!