Propriété border-image-slice

La propriété border-image-slice indique au navigateur quelles parties de l'image iront sur les coins, et lesquelles sur les côtés (et quelle partie sera centrale). Les coins utilisent 4 parties, les côtés utilisent 4 parties et une partie (centrale) va sur le fond de l'élément (optionnellement, mot-clé fill).

Pour plus d'informations, consultez la propriété border-image.

Syntaxe

<+css+> sélecteur { border-image-slice: de 1 à 4 nombres | de 1 à 4 pourcentages; } <-css->

Avec les nombres et les pourcentages, séparés par des espaces, peut se trouver le mot-clé fill.

Valeurs

Valeur	Description
pourcentages	Les pourcentages sont calculés par rapport à la taille de l'image. Les horizontaux par rapport à la largeur, les verticaux — par rapport à la hauteur.
nombres	Les nombres représentent des pixels (pour une image matricielle) ou des coordonnées (pour une image vectorielle). Les unités de mesure ne sont pas indiquées.
`fill`	Le comportement par défaut suppose que la partie centrale de l'image sera ignorée. Pour l'utiliser, il est nécessaire d'utiliser le mot-clé `fill` en plus des nombres ou des pourcentages.

Nombre de paramètres

Le décalage peut prendre 1, 2, 3 ou 4 paramètres. Veuillez noter que les unités de mesure pour le décalage ne s'écrivent pas (par exemple, simplement 20, et non 20px). Il est également possible de définir l'épaisseur en %.

Nombre de paramètres	Description
`1`	Épaisseur pour tous les côtés simultanément.
`2`	1 2; - `1px` pour le haut et le bas, `2px` pour la gauche et la droite.
`3`	`1 2 3`; - `1px` pour le haut, `2px` pour la gauche et la droite, `3px` pour le bas.
`4`	`1 2 3 4`; - `1px` pour le haut, `2px` pour la droite, `3px` pour le bas, `4px` pour la gauche.

Valeur par défaut : 100%(?).

Exemple

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Exemple

<div id="elem"></div>

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: repeat;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Voir aussi

la propriété border-image,
qui est un raccourci pour la bordure-image
la propriété border-image-source,
qui définit le chemin de l'image pour la bordure
la propriété border-image-repeat,
qui définit la répétition de l'image pour la bordure
la propriété border-image-width,
qui définit la taille de l'image pour la bordure
la propriété border-image-outset,
qui définit le décalage de l'image pour la bordure