border-image-slice - Propriété CSS
Résumé des caractéristiques de la propriété border-image-slice
De une à quatre valeurs peuvent être précisées.
100%
border-image-slice
passe progressivement d'une valeur à une autre.Description de la propriété border-image-slice
.
La propriété 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 remplir le fond de l'élément.
Pour cela il faut ajouter la valeur fill
à la propriété border-image-slice
.
Et dans ce cas, l'image d'arrière-plan éventuellement définie par background-image
est masquée.
Pour une présentation générale de l'utilisation des bordures-images, reportez-vous à la propriété résumée border-image
.
Syntaxes pour border-image-slice
.
number
est une valeur numérique sans unité, positive ou null.
%
est un pourcentage.
Cette syntaxe peut être répétée de une à quatre fois, avec des espaces de séparation.
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%; a b c d
Les pourcentages sont déterminés par rapport aux dimensions de l'image : les pourcentages
b
etd
par rapport à la largeur de l'image, et les pourcentagesa
etc
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, ou définit par les autres propriétés relatives à l'arrière-plan de l'élément. - border-image-slice:
initial
; border-image-slice:inherit
; border-image-slice:revert
; border-image-slice:revert-layer
; border-image-slice:unset
;La valeur initiale est :
.100%
Animation de la propriété border-image-slice
.
L'animation de la propriété border-image-slice
est possible, mais dans la mesure ou ses valeurs
sont fortement liées à l'image, les animations risquent d'être peu pertinentes.
A moins d'utiliser une image spécialement conçue dans cet esprit. A vous de lâcher votre créativité.
Exemple interactif.
L'image utilisée pour la bordure de cet exemple est celle-ci. Elle mesure 45 pixels de coté.
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 depuis 2015 à 2017 suivant les navigateurs.
border-image-slice
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que border-image-slice
.
Les spécifications CSS éditées par le W3C sont organisées en modules. border-image-slice
fait partie du Module CSS - Arrière-plans et bordures (CSS Backgrounds and Borders Module). Les définitions suivantes sont également décrites dans ce même module.