Comment obtenir un découpage parfait pour les bordures dégradées à l'aide de border-image-slice ?

Comment Border-Image fonctionne-t-il avec un dégradé linéaire ?

Les bordures dégradées ajoutent une touche unique aux éléments Web, mais comprendre comment l'image-bordure interagit avec eux peut être déroutant.

Comprendre le découpage pour les dégradés

En CSS, border-image-slice définit le découpage d'une image de bordure en neuf régions. Pour les bordures dégradées, la taille de l'image est égale à la taille de l'élément. Si la largeur de l'image de bordure n'est pas spécifiée, la largeur de bordure est utilisée pour définir les régions.

Calcul de la tranche d'image de bordure pour les dégradés

Pour obtenir l'effet souhaité, border-image-width image-slice doit être égal à border-image-width (ou border-width si aucune unité n'est spécifiée) en pixels.

Valeurs sans unité

Les valeurs sans unité dans border-image-slice sont valeurs de pixels prises en compte.

Valeurs en pourcentage

Les valeurs en pourcentage dans border-image-slice sont résolues en fonction de la taille de l'élément.

Exemple

Dans votre exemple, où border-image-slice est défini sur 80 :

• La bordure mesure 5 em de large, ce qui se traduit par 80px.
• 80 dans border-image-slice, étant sans unité, est traité comme 80px.
• Puisque 80px est égal à la largeur de bordure de 80px, le dégradé sera réparti uniformément à travers les régions frontalières.

Visualisation

[Image de Découpage des bordures dégradées]

En résumé

Pour obtenir un découpage parfait des bordures dégradées :

1. Définissez la tranche d'image de bordure égale à la largeur de l'image de bordure (ou border-width).
2. Pour les valeurs en pourcentage, assurez-vous que la valeur calculée est égale à la largeur de la bordure.
3. Utilisez des valeurs sans unités pour le découpage basé sur les pixels.

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!