Comment puis-je utiliser efficacement « border-image-slice » avec des bordures à dégradé linéaire ?

Comment border-image fonctionne-t-il avec les bordures à dégradé linéaire ?

La propriété border-image-slice spécifie les décalages de bord pour les images raster ou coordonnées pour les images vectorielles. Selon la spécification CSS, cette valeur peut être un nombre sans unité, représentant des pixels pour les images raster ou des coordonnées relatives pour les images vectorielles. Cependant, lors de l'utilisation d'un dégradé, certaines complexités surviennent.

Image de bordure dégradée

Dans votre exemple, vous avez défini une image de bordure dégradée comme suit :

border-image: repeating-linear-gradient(45deg, #000, #000 1.5%, transparent 1.5%, transparent 5%) 80;

Ici, le 80 précise la taille de la tranche d'image. Lors de l'utilisation d'un dégradé, la taille de l'image est considérée comme égale à la taille de l'élément. La border-image-width définit les 9 régions où les tranches seront placées (ou border-width est utilisée si elle n'est pas définie).

Comprendre la border-image-slice

Conformément à la spécification, la propriété border-image-slice prend en compte l'image initiale pour créer les tranches. Lorsque vous spécifiez une valeur sans unité (comme 80 dans votre exemple), elle est interprétée comme une valeur de pixel. Une valeur en pourcentage est résolue en fonction de la taille de l'élément.

Découpage et régions

Pour obtenir un résultat optimal, les tranches doivent être égales aux régions définies par la bordure -largeur de l'image. Dans votre cas, 80 représente 80 pixels car vous avez une bordure de 5em (soit 5x16px = 80px). Cela signifie que la tranche est de la même taille que la bordure, garantissant que le dégradé s'aligne correctement.

En résumé, lorsque vous utilisez une image de bordure dégradée, border-image-slice doit correspondre à border-image-width (ou border -largeur) pour aligner parfaitement les tranches avec les régions.

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!