Pourquoi les bordures transparentes déforment-elles les dégradés linéaires et comment puis-je y remédier ?

Anomalie de bordure sur les dégradés : expliquée et résolue

Lors de l'application d'une bordure transparente sur un élément présentant un arrière-plan à dégradé linéaire, un comportement inattendu peut surgir. Les bords gauche et droit de l'élément présentent des couleurs déformées et semblent aplatis.

Cet effet provient de la bordure s'étendant au-delà de la zone de remplissage, où le dégradé linéaire se répète. La zone de bordure extérieure hérite des couleurs dégradées, ce qui entraîne les anomalies observées sur les côtés gauche et droit.

Solution : utilisez Box-Shadow

Pour résoudre ce problème, envisagez d'utiliser un box-shadow:inset au lieu d'une bordure. Les ombres de la boîte s'affichent dans la boîte de remplissage, semblable aux arrière-plans.

Modifiez le CSS comme suit :

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

Explication :

• Les ombres de boîte n'occupent aucune zone spatiale, ce qui nécessite une augmentation du remplissage pour compenser la bordure supplémentaire effet.
• Le mot-clé inset garantit que l'ombre de la boîte reste dans la boîte de remplissage, reflétant l'apparence souhaitée d'une bordure.

Conclusion :

En comprenant le comportement des bordures et des dégradés par rapport à la zone de remplissage, vous pouvez résoudre efficacement cet effet anormal et obtenir la bordure souhaitée. apparition avec une ombre de boîte.

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!