Propriété CSS border-image-slice

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>

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>

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>

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.

Support de Navigateurs

15.0+ 12.0+ 15.0+ 6.0+ 15.0+


Trouvez-vous cela utile?

Articles Associées