La propriété CSS box-shadow peint une ou plusieurs ombres autour d’un élément sans modifier la mise en page. ShadowStack expose uniquement les valeurs présentes dans la déclaration copiée afin de comparer directement aperçu et source. Chaque calque conserve son ordre, son état inset, quatre longueurs en pixels, sa couleur hexadécimale et son opacité.

Reliez les quatre longueurs sans ambiguïté

Après le mot inset facultatif, ShadowStack écrit le décalage X, le décalage Y, le rayon de flou puis le rayon d’étendue dans cet ordre fixe. Les décalages négatifs déplacent l’ombre vers la gauche ou le haut, les positifs vers la droite ou le bas. Le flou ne peut pas être négatif. Une étendue négative contracte la forme avant le flou, une valeur positive l’agrandit. Chaque longueur est un entier en pixels, zéro compris, afin que le code ne dépende jamais d’une valeur omise. Modifiez un champ à la fois et repérez son élément avant de juger le rendu.

Gardez couleur et opacité vérifiables

Le sélecteur fournit une couleur sRGB hexadécimale stricte à six chiffres. L’opacité reste un pourcentage entier séparé afin que la transparence ne modifie jamais la couleur de base. La déclaration convertit ces entrées en syntaxe moderne rgb(R G B / A) : zéro et un sont des limites exactes, les pourcentages intermédiaires deviennent un décimal de deux chiffres au plus. Cette conversion stable produit le même CSS octet pour octet. Elle n’effectue ni gestion des couleurs, prédiction du mélange, analyse du contraste ou conversion en jeton de design.

Vérifiez le CSS dans son composant réel

ShadowStack rend la déclaration copiée avec le moteur du navigateur actuel, mais l’aperçu ne certifie ni compatibilité ni accessibilité. Collez la propriété dans le composant réel et testez chaque navigateur, largeur responsive, fond et conteneur avec overflow pris en charge. Un flou large peut être rogné par un ancêtre et une ombre inset peut couvrir le contenu ou les indicateurs de focus. Contrôlez le focus clavier dans chaque état, mesurez le contraste du texte et des contrôles avec un outil dédié et gardez une bordure ou une autre distinction lorsque l’interface dépend de limites claires. La capsule ne conserve ni réglages ni historique ; enregistrez le CSS accepté dans votre feuille versionnée avant rechargement.