La propriété CSS3 border-image

Définition et utilisation de la propriété CSS3 border-image

La propriété border-image vous permet de spécifier une image à utiliser pour définir la frontière normale autour d'un élément.

La propriété border-image est une propriété raccourcie pour définir le border-image-source, border-image-slice , border-image-width, border-image-outset et les propriétés border-image-repeat.

Les valeurs omises sont définies à leurs valeurs par défaut.

Valeur par défaut :	aucun 100 % 1 0 stretch
Héritée :	No
Animer :	Non
Version:	CSS3
Syntaxe JavaScript :	objet.style.borderImage="url(image.png) 25 rond"

Remarque : la définition d’une frontière image remplacera toute frontière qui a été défini en utilisant les propriétés de border-style . Toutefois, si l'image ne peut pas être chargé, ou si la valeur de border-image est none, les styles de bordure y seront substitués.

Appui de navigateur de la propriété border-image

Les nombres dans le tableau spécifient la version à partir de laquelle le navigateur prend totalement en charge la propriété border-image.

Les numéros suivis du préfixe - webkit- ou - moz- spécifier la première version qui a fonctionné avec ce préfixe.

Propriété \| Navigateur
border-image	16.0 4.0 -webkit-	11.0	15.0 3.5 -moz-	6.0 3.1 -webkit-	15.0 11.0 -o-

Syntaxe CSS de la propriété border-image

border-image: source slice width outset repeat|initial|inherit;

La syntaxe ci-dessus est généralement utilisée pour écrire le moins de code possible, mais on peut aussi définir chaque valeur (source slice width outset repeat) séparément comme on va le voir plus loin.

Valeurs de la propriété border-image

Valeur	Description
border-image-source	Le chemin de l'image à utiliser en tant que bordure
border-image-slice	Comment découper l'image de la frontière
border-image-width	La largeur de l'image de la frontière
border-image-outset	Spécifie la quantité par laquelle la zone d'image de frontière s'étend au-delà de la zone frontalière.
border-image-repeat	Que l'image de la frontière devrait être répété, arrondie ou allongée
initial	Définit cette propriété à sa valeur par défaut.
inherit	Hérite de cette propriété de son élément parent.

Remarque : la propriété border-image s’applique à tous les éléments, sauf les éléments internes de table lorsque border-collapse est sur collapse. Il s'applique également au pseudo élément ::first-letter.

Exemple utilisation de la propriété border-image

Sélectionner le code


  <!DOCTYPE html>
  <html>
  <head>
  <style>
  #borderimg1 {
      border: 1em solid transparent;
                      padding: 10px;
      -webkit-border-image: url(images/border1.jpg) 30 round; /* Safari
  3.1 à 5 */
      -o-border-image: url(images/border1.jpg) 30 round; /* Opera 11 à
  12.1 */
      border-image: url(images/border1.jpg) 30 round;
  }
  #borderimg2 {
      border: 10px solid transparent;
      padding: 15px;
      -webkit-border-image: url(images/border2.jpg) 10% round; /*
  Safari 3.1 à 5 */
      -o-border-image: url(images/border2.jpg) 10% round; /* Opera 11 à
  12.1 */
      border-image: url(images/border2.jpg) 10% round;
  }
  #borderimg3 {
      border: 10px solid transparent;
      padding: 15px;
      -webkit-border-image: url(images/border3.jpg) 10% round; /*
  Safari 3.1 à 5 */
      -o-border-image: url(images/border3.jpg) 10% round; /* Opera 11 à
  12.1 */
      border-image: url(images/border3.jpg) 10% round;
  }
  img{height: 150px;
  }
  </style>
  </head>
  <body>
  <p id="borderimg1">border-image: url(images/border1.jpg) 330
  round;</p>
  <p id="borderimg2">border-image: url(images/border2.jpg) 10%
  round;</p>
  <p id="borderimg3">border-image: url(images/border3.jpg) 10%
  round;</p>
  <p><strong>Remerque:</strong> Internet Explorer 10,
  et les versions antérieures, ne supportent pas la propriété
  border-image.</p>
  <p> Voici les images utilisées:</p>
  <p> <img src="https://www.oujood.com/propriete-css/images/border1.jpg" alt="" />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img
  src="https://www.oujood.com/propriete-css/images/border2.jpg" alt="" />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img
  src="https://www.oujood.com/propriete-css/images/border3.jpg" alt="" /> </p>
  </body>
  </html>

La propriété CSS3 border-image-source

Définition et utilisation de la propriété border-image-source

La propriété border-image-source spécifie le chemin d'accès à l'image qu’on veut utiliser comme frontière (au lieu de la frontière normale) autour d'un élément.

Astuce : Si la valeur est « none », ou si l'image ne peut pas être affichée, les styles de bordure seront utilisés.

Valeur par défaut :	none
Héritée :	no
Animer :	Non
Version:	CSS3
Syntaxe JavaScript :	objet.style.borderImageSource="url(image.png)"

Syntaxe CSS de la propriété border-image-source

border-image-source: none|image|initial|inherit;

none Spécifie qu'aucune image ne doit être utilisé.

image Spécifie l'emplacement de l'image à utiliser. Par exemple, http://www.nomDomaine.com/images/monimage.png

Valeurs de propriété de la propriété border-image-source

Valeur	Description
none	Pas dimage
image	Le chemin de l’image à uiliser comme bordure
initial	Définit cette propriété à sa valeur par défaut.
inherit	Hérite de cette propriété de son élément parent.

La propriété CSS3 border-image-slice

La propriété border-image-slice spécifie comment découper l'image spécifiée par border-image-source. L'image est toujours découpé en neuf sections : quatre coins, quatre bords et un milieu.

La partie « milieu » est considérée comme entièrement transparente, sauf si le mot clé de fill est défini.

Valeur par défaut :	100 %
Héritée :	no
Animer :	Non
Version:	CSS3
Syntaxe JavaScript :	objet.style.borderImageSlice="25%"

Syntaxe CSS de la propriété border-image-slice

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

Remarque : La propriété border-image-slice peut prendre d'une à quatre valeurs. Si la quatrième valeur est omise, elle prend la même valeur que la seconde. Si la troisième est également omise, elle prend la même valeur que la première. Si la seconde est également omise, elle prend la même valeur que la première.

Valeurs de la propriété border-image-slice

Valeur	Description
Nombre	Représente la distance en pixels de l'image pour des images raster ou vecteur de coordonnées pour les images vectorielles.
%	Les pourcentages sont par rapport à la hauteur ou la largeur de l'image
fill	Si indiqué la partie centrale de l'image sera affichée
initial	Définit cette propriété à sa valeur par défaut.
inherit	Hérite de cette propriété de son élément parent.

CSS3 la propriété border-image-outset

La propriété border-image-outset CSS est utilisée pour définir la valeur par laquelle la zone frontière de l'image s'étend au-delà de la zone frontalière.

La propriété border-image-outset est utilisée en conjonction avec le border-image-source, border-image-slice , border-image-width et la propriétés border-image-repeat afin de déterminer comment l'image s'affichera sur la frontière.

Valeur par défaut :	0
Héritée :	no
Animer :	Non
Version:	CSS3
Syntaxe JavaScript :	objet. style.borderImageOutset="25px"

Syntaxe CSS de la propriété border-image-outset

border-image-outset: [ <long> | <nombre> ]{1,4}

Comme l’indique la formule ci-dessus on peut utiliser une à 4 valeurs pour définir les valeurs pour chaque coté.

<nombre> : Une valeur numérique en pixel qui représente un multiple de la border-width .

< long > : Une valeur de longueur qui spécifie une quantité fixe. Par exemple, 0.9em

Exemple une valeur pour définir la même valeur pour les quatre cotés à la fois.

border-image-outset: 1em;

Exemple 2 valeurs pour spécifier les valeurs horizontales et verticale séparément :

border-image-outset: 10px 8px;

Exemple 3Valeurs pour spécifier des valeurs du haut, vertical et du bas séparément :

border-image-outset: 1em 0.8em 1.1em;

Exemple 4 valeurs pour spécifier les valeurs des quatre côtés séparément : border-image-outset: top right bottom left

border-image-outset: 1em 0.9em 1.1em 0.8em;

Définition et utilisation de la propriété CSS3 border-image-width

La propriété border-image-width spécifie la largeur de l'image de la frontière.

Valeur par défaut :	1
Héritée :	no
Animer :	Non
Version:	CSS3
Syntaxe JavaScript :	objet. style.borderImageWidth="20px"

Syntaxe CSS de la propriété border-image-width

border-image-width: number|%|auto|initial|inherit;

Remarque : La propriété border-image-width peut prendre jusqu’à quatre valeurs (haut, droite, bas et côté gauche). Si la quatrième valeur est omise, elle prend la même valeur que la seconde. Si la troisième est également omise, elle prend la même valeur que la première. Si la seconde est également omise, elle prend la même valeur que la première.

Valeurs la propriété border-image-width

Valeur	Description
length	Une unité de longueur (px) pour définir la taille de la bordure
number	La valeur par défaut est 1. Représente des multiples de la largeur de la frontière correspondant
%	En se référant à la taille de zone frontalière de l'image: la largeur de la zone pour les décalages horizontaux ou la hauteur des décalages verticaux
auto	Si spécifié, la largeur est la largeur ou la hauteur intrinsèque de la tranche d'image correspondant
initial	Définit cette propriété à sa valeur par défaut.
inherit	Hérite de cette propriété de son élément parent.

Définition et utilisation de la propriété border-image-repeat

La propriété border-image-repeat spécifie si l'image de la frontière devrait être répété, arrondi ou étirée.

Valeur par défaut :	Stretch
Héritée :	no
Animer :	Non
Version:	CSS3
Syntaxe JavaScript :	objet. style.borderImageRepeat="round"

Syntaxe CSS de la propriété border-image-repeat

border-image-repeat: stretch|repeat|round|initial|inherit;

Remarque : Cette propriété spécifie comment les images pour les côtés et la partie centrale de l'image utilisée pour la frontière sont mis à l'échelle. Ainsi, vous pouvez spécifier jusqu’à deux valeurs. Si la deuxième valeur est omise, elle la même valeur que la première.

Valeurs de propriété

Valeur	Description
stretch	Valeur par défaut. L'image est étirée pour remplir la zone définie
repeat	L'image est en carrelée (répété) pour remplir la zone
round	L'image est en mosaïque (répété) pour remplir la zone. Si elle ne remplit pas la zone avec un nombre entier de carreaux, l'image est redimensionnée afin de l'adapter
space	L'image est en mosaïque (répété) pour remplir la zone. Si elle ne remplit pas la zone avec un nombre entier de carreaux, l'espace supplémentaire qui reste est distribuée autour des carreaux
initial	Définit cette propriété à sa valeur par défaut.
inherit	Hérite de cette propriété de son élément parent.

Exemple