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

La bordure déborde d'un arrière-plan dégradé

Lors de l'ajout d'une bordure transparente à un élément avec un arrière-plan dégradé linéaire, des effets inattendus peuvent survenir. Les côtés gauche et droit peuvent présenter des couleurs incorrectes et un aspect plat.

Cause

Le dégradé s'étend jusqu'aux bords de la boîte de remplissage, tandis que la bordure est dessinée en dehors de cette zone. Cette disparité crée un visuel indésirable.

Solution

Pour remédier à ce problème, pensez à utiliser box-shadow:inset au lieu de border. box-shadow:inset est rendu dans la padding-box, imitant l'effet d'une bordure sans affecter l'apparence de l'arrière-plan.

CSS révisé :

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

Remarque : Puisque box-shadow n'occupe pas d'espace, ajustez le remplissage en conséquence.

Illustration :

[Image de l'illustration de la boîte de remplissage et de la bordure ici]

Démo :

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!