CSS - Propriété border-image-slice
Description de la propriété border-image-slice
.
border-image-slice
définit comment l'image de bordure doit être découpée.
En effet, la bordure est construite à partir de neuf parties d'image : les quatre coins,
les quatre bords et le centre.
Ces 9 parties d'image sont extraites d'une image unique définie par border-image-source
.
Les neuf parties d'image ne sont pas forcément de tailles identiques.
La partie centrale (5) peut être utilisée pour le fond de l'élément. Le dernier paramètre de
border-image-slice
indique si ce doit être le cas ou si le fond doit être transparent.
Pour une présentation générale de l'utilisation des bordures-images, reportez-vous à la propriété
raccourcie border-image
.
Syntaxes pour border-image-slice
.
border-image-slice: 20 15 5 30;
Quatre valeur positives, sans unité. Elles indiquent comment l'image doit être découpée en neuf parties.
Les valeurs correspondent successivement à la distance par rapport aux bords haut, droit, bas et gauche, conformément au schéma ci-dessous :/
Il n'y a pas d'unité à préciser : ce sont obligatoirement des pixels si l'image est bitmap, ou des coordonnées si l'image est vectorielle.
Si les valeurs sont trop grandes, il se peut que la partie centrale soit réduite à zéro. Dans ce cas, la valeur
fill
sera sans effet (voir plus bas).border-image-slice: 25% 10% 10% 30%;
Les pourcentages sont calculés par rapport aux dimensions de l'image : les décalages horizontaux par rapport à la largeur de l'image, et les décalages verticaux par rapport à sa hauteur.
border-image-slice: 20 15 5;
Si trois valeurs seulement sont précisées, la distance par rapport au bord gauche sera identique à celle par rapport au bord droit.
border-image-slice: 20 15;
Si deux valeurs seulement sont précisées, la distance par rapport au bord gauche sera identique à celle par rapport au bord droit, et la distance par rapport au bord du bas sera identique à celle par rapport au bord du haut.
border-image-slice: 20;
Enfin, si une seule valeur est précisée, elle s'applique à tous les bords.
border-image-slice: 20 10 15 15 fill;
La valeur
fill
indique que la partie centrale de l'image doit être utilisé pour remplir le fond de l'élément. Sifill
n'est pas précisé, le fond de l'élément est transparent.-
Reportez-vous à la description générale de ces valeurs.
Simulateur.
L'image utilisée est celle-ci. Elle mesure 45 pixels de coté.
border-image-slice
:
Prise en charge par les navigateurs.
La propriété border-image-slice
ainsi que les autres propriétés
relatives aux images de bordure sont correctement prises en charge par les navigateurs.
Afficher le tableau de compatibilité (informations fournies par canIuse.com).
Voir aussi...
Bordures - Propriétés.
border
: Résumé des propriétés des bordures.border-collapse
: Mode d'encadrement des cellules de tableau.border-color
: Définit la couleur des bordures.border-image
: Résumé des propriétés des bordures réalisées avec des images.border-image-outset
: Débordement de l'image de bordure.border-image-repeat
: Mode de répétition de l'image de bordure.border-image-source
: L'image utilisée pour construire la bordure.border-image-width
: La largeur de la bordure image.border-radius
: Rayon des angles arrondis.border-spacing
: Espacement entre les cellules adjacentes dans un tableau.border-style
: Type de bordure (simple, double, pointillé...).border-width
: Epaisseur de la bordure.