CSS Images de Bordure
Images de Bordure CSS
Avec la propriété CSS border-image , vous pouvez définir une image à utiliser comme bordure autour d'un élément.
Propriété border-image CSS
La propriété border-image vous permet de définir une image à utiliser comme bordure autour d'un élément, au lieu de la bordure classique.
Cette propriété prend une image et la découpe en neuf sections, comme un plateau de tic-tac-toe. Elle place ensuite les coins aux coins, et les sections centrales sont répétées ou étirées selon vos spécifications.
La propriété border-image est une propriété abrégée pour les propriétés suivantes :
-
border-image-source- définit le chemin vers l'image -
border-image-slice- définit comment découper l'image -
border-image-width- définit la largeur de l'image -
border-image-outset- définit la quantité par laquelle la zone de l'image de bordure s'étend au-delà de la boîte de bordure -
border-image-repeat- définit comment répéter l'image
Remarque : Pour que border-image fonctionne, l'élément doit également avoir la propriété border définie !
Exemples de border-image CSS
Nous allons utiliser l'image suivante (nommée "border.png") :
Dans l'exemple suivant, l'url(border.png) spécifie l'image source, le nombre 30 découpe l'image de 30 pixels de chaque bord, et la valeur round indique que la section centrale de l'image est carrelée (répétée) pour remplir la zone (et redimensionnée si nécessaire) :
Voici le code :
Exemple
#borderimg {
border: 10px solid transparent; /* Nécessaire pour border-image */
padding: 15px;
border-image: url(border.png) 30 round;
} Ici, la valeur stretch indique que la section centrale de l'image est étirée pour remplir la zone :
Voici le code :
Exemple
#borderimg {
border: 10px solid transparent; /* Nécessaire pour border-image */
padding: 15px;
border-image: url(border.png) 30 stretch;
} border-image CSS - Valeurs de Découpe Différentes
Différentes valeurs de découpe changent complètement l'apparence de l'image de bordure :
Exemple 1 :
Exemple 2 :
Exemple 3 :
Voici le code :
Exemple
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30% round;
} Propriétés d'Image de Bordure CSS
| Propriété | Description |
|---|---|
| border-image | Une propriété abrégée pour définir toutes les propriétés border-image-* |
| border-image-source | Spécifie le chemin vers l'image à utiliser comme bordure |
| border-image-slice | Spécifie comment découper l'image de bordure |
| border-image-width | Spécifie les largeurs de l'image de bordure |
| border-image-outset | Spécifie la quantité par laquelle la zone de l'image de bordure s'étend au-delà de la boîte de bordure |
| border-image-repeat | Spécifie si l'image de bordure doit être répétée, arrondie ou étirée |