Propriété border-image-slice CSS

Définition et utilisation

L'attribut border-image-slice spécifie le décalage vers l'intérieur de la bordure de l'image.

Veuillez également consulter :

Tutoriel CSS3 :Bordure CSS3

Exemple

Définir le décalage vers l'intérieur de la bordure de l'image :

div
{
border-image-source: url(border.png);
border-image-slice: 50% 50%;
}

Syntaxe CSS

border-image-slice: number|%|fill;

Remarque :Cette propriété spécifie le décalage vers l'intérieur des bords supérieur, droit, inférieur et gauche de l'image, l'image est divisée en neuf zones : quatre coins, quatre côtés et une zone centrale. Sauf si le mot-clé fill est utilisé, la partie centrale de l'image sera rejetée. Si le quatrième nombre/percentage est omis, il est égal au deuxième valeur. Si le troisième valeur est omis, il est égal au premier valeur. Si le deuxième valeur est omis, il est égal au premier valeur.

Valeur de l'attribut

Valeur Description
number Valeur numérique, représentant les pixels dans l'image (si c'est une image raster) ou les coordonnées vectorielles (si c'est une image vectorielle).
% Pourcentage par rapport à la taille de l'image : la largeur affecte le décalage horizontal, la hauteur affecte le décalage vertical.
fill Conserver la partie centrale de l'image de bordure.

Détails techniques

Valeur par défaut : 100%
Héritabilité : non
Version : CSS3
Syntaxe JavaScript : object.style.borderImageSlice="50% 50%"

Support du navigateur

Les numéros dans le tableau indiquent la version du navigateur la première à prendre en charge cette propriété.

Chrome IE / Edge Firefox Safari Opera
15.0 11.0 15.0 6.0 15.0

voir border-image propriété.