border-image |
Image de bordure |
|---|---|
| CSS3 |
Syntaxe
| border-image: source slice width outset repeat|inherit|initial; |
Paramètres
| Paramètre | Description | ||
|---|---|---|---|
| source | Ce paramètre permet d'indiquer le chemin et l'image utilisé comme bordure : | ||
| Valeur | Description | ||
| source | Cet attribut permet d'indiquer le chemin URL du fichier d'image : | ||
| Valeur | Description | ||
| url(image.ext) | Cette valeur permet d'indiquer le nom de l'image. | ||
| none | Cette valeur permet d'indiquer qu'il n'y a pas d'image. | ||
| inherit | Cet attribut permet d'indiquer qu'il hérite des propriétés de la balise parente. | ||
| initial | Cet attribut permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. | ||
| slice | Ce paramètre permet de découper la bordure d'image : | ||
| Valeur | Description | ||
| longueur | Ce paramètre permet d'indiquer le nombre de pixels à découper. | ||
| pourcentage% | Ce paramètre permet d'indiquer le pourcentage à découper. | ||
| fill | Ce paramètre permet d'indiquer que la partie de l'image est affiché. | ||
| inherit | Ce paramètre permet d'indiquer qu'il faut hérité de la valeur de son parent. | ||
| initial | Ce paramètre permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. | ||
| width | Ce paramètre de propriété permet d'indiquer la largeur de bordure d'image : | ||
| Valeur | Description | ||
| inherit | Cet attribut permet d'indiquer qu'il hérite des propriétés de la balise parente. | ||
| initial | Cet attribut permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. | ||
| largeurin | Cet attribut permet d'indiquer que la largeur de la bordure d'image est calculé en pouce. | ||
| largeurpt | Cet attribut permet d'indiquer que la largeur de la bordure d'image est calculé en points. | ||
| largeurpx | Cet attribut permet d'indiquer que la largeur de la bordure d'image est calculé en pixels. | ||
| pourcentage% | Cet attribut permet d'indiquer que la largeur de la bordure d'image est calculé en fonction du pourcentage d'espace disponible. | ||
| largeur | Cet attribut permet d'indiquer que la largeur de la bordure d'image est calculé en nombre réel (à virgule flottante). | ||
| outset | Ce paramètre permet de fixer la quantité de l'image de bordure allant au delà de la boite de bordure : | ||
| Valeur | Description | ||
| nombre | Cet attribut permet d'indiquer le nombre de pixels que doit avoir cette espacement. La valeur par défaut est 0. | ||
| inherit | Cet attribut permet d'indiquer qu'il faut hérité de la valeur de son parent. | ||
| initial | Cet attribut permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. | ||
| repeat | Ce paramètre permet de fixer si l'image de bordure doit avoir une répétition, des arrondissements et des étirements : | ||
| Valeur | Description | ||
| inherit | Cet attribut permet d'indiquer qu'il faut hérité de la valeur de son parent. | ||
| initial | Cet attribut permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. | ||
| repeat | Cet attribut permet d'indiquer que l'image doit être répété en mosaïque afin de remplir la région. | ||
| round | Cet attribut permet d'indiquer que l'image doit être répété en mosaïque afin de remplir la région mais sans qu'elle effectue une demi-affichage, elle étirera les images afin que la mosaïque couvre l'espace entière. | ||
| space | Cet attribut permet d'indiquer que l'image doit être répété en mosaïque afin de remplir la région mais sans qu'elle effectue une demi-affichage, elle redistribuera plutôt l'espace équitablement entre les mosaïques. | ||
| stretch | Cet attribut permet d'indiquer qu'il faut étirer l'image afin de remplir la région. C'est la valeur par défaut. | ||
| inherit | Ce paramètre permet d'indiquer qu'il faut hérité de la valeur de son parent. | ||
| initial | Ce paramètre permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. | ||
Description
Cette propriété permet d'indiquer l'aspect d'image de bordure que doit avoir un élément.
Remarques
- Définition et fonction : La propriété border-image permet de définir une image à utiliser comme bordure d'un élément HTML. Elle combine plusieurs propriétés liées à la bordure en une seule déclaration, incluant l'image de bordure, la façon dont elle est découpée et répétée, ainsi que la largeur des bordures. Cela permet d'ajouter des effets visuels complexes aux éléments sans recourir à des images supplémentaires ou à des effets CSS compliqués.
- Valeurs attendues : La propriété border-image accepte plusieurs valeurs qui déterminent comment l'image de bordure sera utilisée. Les valeurs incluent l'URL de l'image (url()), suivie de valeurs pour border-width, slice, width, et outset. L'ordre des valeurs est important et permet de spécifier l'épaisseur de la bordure, la façon dont l'image est découpée, et comment elle est répétée ou étendue.
- Propriétés associées : La propriété border-image est un raccourci pour quatre autres propriétés CSS : border-image-source (définissant l'image de bordure), border-image-slice (découpant l'image en sections), border-image-width (déterminant l'épaisseur de la bordure) et border-image-outset (contrôlant l'extension de l'image de bordure au-delà de la bordure de l'élément).
- Découpage de l'image avec border-image-slice : Le découpage de l'image est contrôlé par la propriété border-image-slice. Elle détermine quelles parties de l'image sont utilisées pour les coins et les côtés de l'élément. Cela permet de créer des bordures personnalisées en sélectionnant différentes zones de l'image pour chaque section de la bordure (haut, bas, gauche, droite).
- Effet de border-image-repeat : Par défaut, l'image de bordure est répétée pour remplir toute la longueur de la bordure. Toutefois, on peut contrôler ce comportement avec la propriété border-image-repeat, en choisissant des options comme stretch, repeat ou round. Cela permet de mieux ajuster l'image pour qu'elle s'adapte à différentes tailles d'éléments.
- Compatibilité avec les coins : Lors de l'utilisation d'images pour les bordures, il est possible de spécifier comment l'image se répète ou se découpe dans les coins de l'élément. En utilisant la propriété border-image-slice, vous pouvez décider de conserver des coins spécifiques ou d'étirer l'image pour les coins afin de maintenir une apparence homogène, même lorsque l'élément change de taille.
- Performance et accessibilité : Bien que l'utilisation d'images pour les bordures crée des effets visuels attrayants, elle peut parfois affecter la performance, surtout lorsqu'on utilise des images de grande taille. De plus, la dépendance aux images peut poser des problèmes d'accessibilité, car les utilisateurs désactivant les images ou utilisant des lecteurs d'écran peuvent avoir une expérience altérée si les bordures sont essentielles à la compréhension du contenu.
- Limitations d'usage : La propriété border-image n'est pas toujours idéale pour toutes les situations. Par exemple, elle ne permet pas d'appliquer des bordures avec des courbes complexes ou des ombrages autour de l'élément. De plus, la gestion des bordures avec des images peut être plus difficile à maintenir et peut causer des problèmes d'affichage lorsque l'élément est redimensionné, surtout si les images utilisées ne sont pas adaptées à différents types de résolutions ou d'écrans.
Dernière mise à jour : Dimanche, le 20 décembre 2015