Images de bordure CSS
Images de bordure CSS
Avec le CSS border-image vous pouvez définir une image à utiliser comme bordure autour d’un élément.
Propriété CSS border-image
Le CSS border-image La propriété vous permet de spécifier une image à utiliser à la place de la bordure normale autour d’un élément.
La propriété comporte trois parties :
- L’image à utiliser comme bordure
- Où découper l’image
- Définir si les sections du milieu doivent être répétées ou étirées
Nous utiliserons l’image suivante (appelée « border.png ») :
Le border-image propriété prend l’image et la découpe en neuf sections, comme une planche de tic-tac-toe. Il place ensuite les coins aux coins et les sections du milieu sont répétées ou étirées comme vous le spécifiez.
Note: Pour border-image pour fonctionner, l’élément a également besoin du
border ensemble de propriétés !
Ici, les sections centrales de l’image sont répétées pour créer la bordure :
Une image comme bordure !
Voici le code :
Exemple
#borderimg {
bordure : 10px solide transparent ;
rembourrage : 15px ;
border-image : url(border.png) 30 tours ;
}
Essayez-le vous-même »
Ici, les sections centrales de l’image sont étirées pour créer la bordure :
Une image comme bordure !
Voici le code :
Exemple
#borderimg {
bordure : 10px solide transparent ;
rembourrage : 15px ;
border-image : url(border.png) 30 stretch ;
}
Essayez-le vous-même »
Conseil: Le border-image propriété est en fait une propriété abrégée pour le
border-image-source, border-image-slice, border-image-width,
border-image-outset
et border-image-repeat propriétés.
CSS border-image – Différentes valeurs de tranche
Différentes valeurs de tranche modifient complètement l’apparence de la bordure :
Exemple 1:
border-image : url(border.png) 50 rond ;
Exemple 2 :
border-image : url(border.png) arrondie à 20 % ;
Exemple 3 :
border-image : url(border.png) 30 % rond ;
Voici le code :
Exemple
#borderimg1 {
bordure : 10px solide transparent ;
rembourrage : 15px ;
border-image : url(border.png) 50 rond ;
}
#borderimg2 {
bordure : 10px solide transparent ;
rembourrage : 15px ;
border-image : url(border.png) arrondie à 20 % ;
}
#borderimg3 {
bordure : 10px solide transparent ;
rembourrage : 15px ;
border-image : url(border.png) 30 % rond ;
}
Essayez-le vous-même »
Propriétés de l’image de bordure CSS
#Images #bordure #CSS