Propriété CSS border-image-slice

❮ Précédent Suivant ❯

La propriété border-image-slice spécifie comment découper l'image spécifiée par border-image-source en neuf régions: quatre coins, quatre côtés, une partie moyenne. La partie "middle" est complètement transparent, jusq'à la valeur "fill" est définie.

La propriété border-image-slice a trois valeurs: number, percentage et fill. Number représente un offset de côté en pixels pour les images raster et coordionne pour les images vector. Percentage représente un offset de côté comme un pourcentage de la taille de l'image de source. Fill fait la partie moyenne de l'image être affichée comme un image du fond.

Cette propriété peut avoir jusqu'à quatre valeurs. Valeurs négatives ne sont pas permises. S'il y a une valeur appliquée, cela fait tous les quatre tranches à la même distance de leurs propres côtés. S'il y a deux valeurs spécifiées, la première crée des tranches mesurés de haut à bas, la deuxième crée des tranches mesurés de gauche à droit. S'il y a trois valeurs appliquées, la première crée des tranche mesurés de haut, la deuxième de droit et de gauche, la troisième de bas. Et si quatre valeurs sont spécifiées, elles créent des tranches des quatre côtés.

Valeur initiale	100%.
Appliquée à	Tous les éléments. Elle est aussi appliquée à pseudo-élément ::first-letter.
Héritée	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.borderImageSlice = "10%";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
      border: 10px solid transparent;
      padding: 15px;
      border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
      border-image-slice: 20%;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de border-image-slice</h2>
    <p class="border">Ici le border-image-slice est défini à 20%.</p>
    <p>Ici l'image originelle est utilisée:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%">
  </body>
</html>

Essayez-vous-même!

Un autre exemple, où on a deux valeurs utilisées.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
      border: 10px solid transparent;
      padding: 15px;
      border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
      border-image-slice: 30 50;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de border-image-slice</h2>
    <p class="border">Ici le border-image-slice est défini 30 et 50.</p>
    <p>Ici l'image originelle est utilisée:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%">
  </body>
</html>

Essayez-vous-même!

Un exemple, où la première valeur est représentée en pourcentage, la deuxième valeur par "fill".

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
      border: 10px solid transparent;
      padding: 15px;
      border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
      border-image-slice: 15% fill;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de border-image-slice</h2>
    <p class="border"><strong>Ici le border-image-slice est défini à 15 fill.</strong></p>
    <p>Voici l'image originelle:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%">
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
number	Number représente un offset de côté en pixels pour les images raster et coordionne pour les images vector.
%	Percentage représente un offset de côté comme un pourcentage de la taille de l'image de source.
fill	fait la partie moyenne de l'image être affichée comme un image du fond.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.