Comment définir la bordure de l'image avec CSS

En CSS, vous pouvez utiliser l'attribut border-image pour définir la bordure de l'image. Il vous suffit d'ajouter le style « border-image : image pathcuting width mosaïque ; » à l'élément. L'attribut border-image peut ajouter une image d'arrière-plan à la bordure pour obtenir l'effet de bordure d'image.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Au stade d'introduction à CSS, nous avons appris l'attribut border-style, et nous savions également que les bordures n'ont que quelques styles simples tels que des lignes pleines et des lignes pointillées. Et si nous voulons ajouter une belle image de fond à la bordure ?

En CSS3, nous pouvons utiliser l'attribut border-image pour ajouter une image d'arrière-plan à la bordure. Les dernières versions de tous les principaux navigateurs prennent désormais en charge l'attribut border-image.

Syntaxe :

Description :

l'attribut border-image doit être défini 3 aspects du contenu.

(1) Chemin de l'image.

(2) Largeur de coupe : la largeur de coupe des quatre côtés, dans l'ordre : bord supérieur, bord droit, bord inférieur et bord gauche (dans le sens des aiguilles d'une montre).

(3) Méthode de carrelage : Il existe 3 valeurs, à savoir répéter, arrondir et étirer.

Dans tous les exemples de cette section, nous utilisons l'image 90px×90px affichée dans l'image comme image d'arrière-plan de la bordure.

Exemple de code :

L'aperçu du navigateur est tel qu'indiqué ci-dessous.

Analyse :

Dès l'effet de prévisualisation, on peut savoir que les nombres 1, 3, 7, 9 situés au Les 4 coins sont toujours docilement situés aux 4 coins. Ensuite, les 4 bordures 2, 4, 6 et 8 seront continuellement carrelées.

Pour l'attribut border-image, nous le résumons comme suit :

(1) Lors de la création d'une image de fond de bordure, 4 côtés doivent être créés et la partie centrale doit être évidée .

(2) La largeur de chaque côté de l'image d'arrière-plan de la bordure doit être la même que la largeur de la bordure correspondante (c'est-à-dire la largeur de la bordure).

Exemple : méthode de mosaïque

      
  
repeat
 
round
 
stretch
  

L'effet d'aperçu du navigateur est le suivant :

Analyse :

Il existe trois méthodes de mosaïque pour l'attribut border-image : répéter, arrondir et étirer.

(1) Lorsque la valeur est répétée, le petit carré à quatre côtés sera répété en continu et la partie au-delà de l'élément sera coupée.

(2) Lorsque la valeur est ronde, cela signifie que les petits carrés à 4 côtés seront couverts. L'image de bordure est compressée ou étirée pour obtenir une couverture complète.

(3) Lorsque la valeur est étirement, cela signifie que le petit carré à 4 côtés sera étiré aussi longtemps que les côtés le sont.

Les sous-attributs dérivés des attributs border-image

border-image peuvent être séparés et définir les images d'arrière-plan correspondantes pour les 4 côtés respectivement. sont les suivants indiqués dans le tableau.

(Partage de vidéos d'apprentissage :tutoriel vidéo CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!