Pour les bordures des éléments, en plus d'utiliser certains des styles par défaut introduits précédemment, nous pouvons également utiliser des images comme bordures d'éléments via la propriété border-image en CSS3 pour créer des effets de bordure colorés.
L'attribut border-image peut diviser une image en 9 parties distinctes grâce à quelques règles simples, et le navigateur utilisera automatiquement les parties correspondantes pour remplacer le style par défaut de la bordure. L'attribut border-image est l'abréviation des cinq attributs border-image-*, et son format de syntaxe est le suivant :
border-image：border-image-source||border-image-slice[/border-image-width|/border-image-width?/border-image-outset]?||border-image-repeat
Ensuite, nous utilisons les images ci-dessous pour démontrer l'utilisation de border-image-source, border-image-slice, border-image-width, border-image-outset et border-image-repeat.
1. frontière-image-source
L'attribut border-image-source est utilisé pour définir l'image à utiliser pour la bordure. Grâce à cet attribut, vous pouvez spécifier une image pour remplacer le style par défaut de la bordure lorsque la valeur de l'attribut border-image-source est. aucune ou l'image spécifiée n'est pas disponible, elle sera affichée le style par défaut de la bordure.
De plus, en plus d'utiliser l'attribut border-image-source pour remplacer le style par défaut de la bordure par une image, vous pouvez également utiliser des dégradés pour définir le style de bordure. Le format de syntaxe de l'attribut est le suivant :
bordure-image-source : aucun | <image>
Parmi eux, none est la valeur par défaut de l'attribut border-image-source, ce qui signifie que l'image n'est pas utilisée pour remplacer le style par défaut de la bordure ; <image> est le chemin de l'image spécifié à l'aide de la fonction url() ou de la fonction url(). couleur de dégradé définie à l'aide de la fonction Linear-gradient(), utilisée pour remplacer le style de bordure par défaut.
[Exemple] Utilisez l'attribut border-image-source pour remplacer le style de bordure par défaut par une image :
<!DOCTYPEhtml><html><head><style>div{width:200px;border:27pxsolid;padding:10px;border-image-source:url(./img.png);}</style></head ><body><div>Remplacer la bordure par défaut par une image</div></body></html>Résultats en cours d'exécution :
Il ressort des résultats en cours d'exécution que la simple utilisation de l'attribut border-image-source ne peut pas obtenir l'effet souhaité. Jetons un coup d'œil à plusieurs autres fonctions.
2. bordure-image-tranche
L'attribut border-image-slice est utilisé pour diviser les images chargées via l'attribut border-image-source. Le format de syntaxe de l'attribut est le suivant :
border-image-slice：[<numéro>|<percentage>]{1,4}&&fill ?La propriété border-image-slice peut recevoir trois types de valeurs :
1. <numéro> : valeur numérique. Spécifiez la position de segmentation de l'image avec une valeur numérique spécifique. La valeur numérique représente la position du pixel ou la coordonnée vectorielle de l'image. Les valeurs négatives ne sont pas autorisées.
2. <pourcentage> : Pourcentage, par rapport à la taille de l'image. La largeur de l'image affecte la direction horizontale et la hauteur affecte la direction verticale.
3. remplir : conserver la partie centrale de l'image de bordure.
L'attribut border-image-slice peut spécifier les quatre directions haut, bas, gauche et droite pour diviser l'image et diviser l'image en 9 parties dont 4 coins, 4 côtés et la zone médiane est toujours. transparent (c'est-à-dire aucun remplissage d'image), à moins que le mot-clé fill ne soit ajouté, comme indiqué ci-dessous :
En plus du mot-clé fill, l'attribut border-image-slice peut accepter 1 à 4 valeurs de paramètre :
1. Si les quatre valeurs de paramètres sont fournies, l'image sera segmentée dans l'ordre haut, droite, bas et gauche ;
2. Si trois paramètres sont fournis, le premier paramètre est utilisé pour le haut, le deuxième paramètre est utilisé pour les côtés gauche et droit et le troisième paramètre est utilisé pour le bas ;
3. Si deux paramètres sont fournis, le premier paramètre est utilisé pour le haut et le bas, et le deuxième paramètre est utilisé pour la gauche et la droite ;
4. Si un seul paramètre est fourni, alors le haut, la droite, le bas et la gauche seront divisés en utilisant cette valeur.
[Exemple] Utilisez l'attribut border-image-slice pour diviser une image chargée via l'attribut border-image-source :
<!DOCTYPEhtml><html><head><style>div{width:200px;border:27pxsolid;padding:10px;border-image-source:url(./img.png);border-image-slice:27; </style></head><body><div>Remplacer la bordure par défaut par une image</div></body></html>Résultats en cours d'exécution :
3. bordure-image-largeur
La propriété border-image-width est utilisée pour définir l'épaisseur (largeur) de l'image chargée via la propriété border-image-source. Le format de syntaxe de la propriété est le suivant :
border-image-width : [<longueur>|<pourcentage>|<numéro>|auto]{1,4}La syntaxe est expliquée comme suit :
1. <longueur> : Spécifiez la largeur de la bordure de l'image en utilisant une valeur numérique plus une unité. Les valeurs négatives ne sont pas autorisées ;
2. <pourcentage> : spécifiez la largeur de la bordure de l'image sous la forme d'un pourcentage et convertissez-la en référence à la largeur et à la hauteur de la zone de bordure de l'image. Les valeurs négatives ne sont pas autorisées ;
3. <numéro> : utilisez un nombre à virgule flottante pour spécifier la largeur de la bordure de l'image. Cette valeur correspond à un multiple de border-width. Par exemple, si la valeur est 2, la valeur réelle du paramètre est 2 * border. -width Les valeurs négatives ne sont pas autorisées ;
4. auto : automatiquement défini par le navigateur. Lorsque border-image-width est défini sur auto, sa valeur réelle est la même que border-image-slice.
Astuce : La valeur par défaut de l'attribut border-image-width est 1, ce qui signifie que lorsque nous omettons la valeur de l'attribut border-image-width, la valeur de cet attribut sera définie sur 1 * border-width, ce qui est équivalent à utiliser directement la valeur border -width.
La propriété border-image-width peut également accepter 1 à 4 valeurs de paramètre :
1. Si les quatre valeurs de paramètres sont fournies, la largeur de la bordure de l'image dans les quatre directions sera définie dans l'ordre haut, droite, bas et gauche ;
2. Si trois paramètres sont fournis, le premier paramètre est utilisé pour la bordure supérieure, le deuxième paramètre est utilisé pour les bordures gauche et droite et le troisième paramètre est utilisé pour la bordure inférieure ;
3. Si deux paramètres sont fournis, le premier paramètre est utilisé pour les bordures supérieure et inférieure, et le deuxième paramètre est utilisé pour les bordures gauche et droite ;
4. Si un seul paramètre est fourni, les valeurs haut, droite, bas et gauche seront utilisées pour définir la largeur de la bordure de l'image.
[Exemple] Utilisez la propriété border-image-width pour définir la largeur de la bordure de l'image :
<!DOCTYPEhtml><html><head><style>div{width:200px;border:27pxsolid;padding:10px;border-image-source:url(./img.png );border-image-slice:27;border-image-width:10px10.515px;}</style></head><body><div>Remplacer la bordure par défaut par une image</div></body> </html>Résultats en cours d'exécution :
4. bordure-image-début
L'attribut border-image-outset est utilisé pour définir la distance de décalage vers l'extérieur de la bordure de l'image par rapport à la limite de la bordure (de sorte que la bordure de l'image s'étende au-delà du modèle de boîte). Le format syntaxique de cet attribut est le suivant :
border-image-outset：[<longueur>|<numéro>]{1,4}La syntaxe est expliquée comme suit :
1. <longueur> : Spécifiez la distance de décalage vers l'extérieur de la bordure de l'image sous la forme d'une valeur spécifique plus une unité. Les valeurs négatives ne sont pas autorisées ;
2. <numéro> : utilisez un nombre à virgule flottante pour spécifier la distance de décalage vers l'extérieur de la bordure de l'image. Cette valeur représente un multiple de la largeur de la bordure. Par exemple, la valeur est 2, ce qui signifie que le décalage est de 2 * largeur de la bordure. . Les valeurs négatives ne sont pas autorisées.
1. L'attribut border-image-outset peut également accepter 1 à 4 valeurs de paramètre :
2. Si les quatre valeurs de paramètres sont fournies, les quatre côtés seront appliqués dans l'ordre supérieur, droit, inférieur et gauche ;
3. Si trois valeurs de paramètres sont fournies, le premier paramètre sera utilisé pour la bordure supérieure, le deuxième paramètre sera utilisé pour les bordures gauche et droite et le troisième paramètre sera utilisé pour la bordure inférieure ;
4. Si deux paramètres sont fournis, le premier paramètre sera utilisé pour les bordures supérieure et inférieure, et le deuxième paramètre sera utilisé pour les bordures gauche et droite ;
5. Si un seul paramètre est fourni, il s'appliquera aux quatre côtés en même temps.
[Exemple] Utilisez l'attribut border-image-outset pour définir le décalage vers l'extérieur de la bordure de l'image par rapport à la limite de la bordure :
5. répétition de l'image de bordure
L'attribut border-image-repeat est utilisé pour définir la manière de remplir la bordure de l'image divisée par l'attribut border-image-slice, comme le carrelage, l'étirement, etc. Le format de syntaxe de cet attribut est le suivant :
border-image-repeat：[étirer|répéter|arrondir|espace]{1,2}La syntaxe est expliquée comme suit :
1. étirer : étirer l'image divisée pour remplir la zone de bordure ;
2. répéter : utilisez un carrelage répété de l'image segmentée pour remplir la zone de bordure. Lorsque l'image atteint la bordure, la partie excédentaire sera tronquée ;
3. round : similaire au mot-clé répétition, sauf que lorsque l'image d'arrière-plan ne peut pas être carrelée un nombre entier de fois, l'image sera mise à l'échelle en fonction de la situation ;
4. espace : similaire au mot-clé de répétition, sauf que lorsque l'image d'arrière-plan ne peut pas être carrelée un nombre entier de fois, des espaces vides seront remplis autour de l'image.
L'attribut border-image-repeat peut accepter 1 à 2 valeurs de paramètre :
1. Si deux paramètres sont fournis, le premier paramètre sera utilisé pour la direction horizontale et le second sera utilisé pour la direction verticale ;
2. Si un seul paramètre est fourni, la valeur sera appliquée horizontalement et verticalement.
[Exemple] Utilisez l'attribut border-image-repeat pour définir la méthode de remplissage de la bordure de l'image :
<!DOCTYPEhtml><html><head><style>div{width:200px;border:27pxsolid;padding:10px;border-image-source:url(./img.png);border-image-slice:27; border-image-repeat:roundrepeat;}</style></head><body><div>Remplacer la bordure par défaut par une image</div></body></html>Résultats en cours d'exécution :
6. bordure-image
Après avoir compris les propriétés de border-image-source, border-image-slice, border-image-width, border-image-outset et border-image-repeat, revenons en arrière et regardons la propriété border-image. L'attribut border-image est l'abréviation de cinq attributs border-image-*. Cinq attributs border-image-* peuvent être définis en même temps via l'attribut border-image.
[Exemple] Utilisez l'attribut border-image pour définir la bordure de l'image :
