Maison > Article > interface Web > 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 :
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div { width:210px; height:150px; border:30px solid gray; border-image:url(img/border.png) 30 repeat; } </style> </head> <body> <div></div> </body> </html>
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
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div { width:170px; height:110px; line-height:110px; text-align: center; border:30px solid gray; margin-top:20px; } /*第1个div平铺方式为:repeat*/ #div1{border-image:url(img/border.png) 30 repeat;} /*第2个div平铺方式为:round*/ #div2{border-image:url(img/border.png) 30 round;} /*第3个div平铺方式为:stretch*/ #div3{border-image:url(img/border.png) 30 stretch;} </style> </head> <body> <div id="div1">repeat</div> <div id="div2">round</div> <div id="div3">stretch</div> </body> </html>
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.
子属性 | 说明 |
---|---|
border-top-image | 定义上边框背景图片 |
border-bottom-image | 定义下边框背景图片 |
border-left-image | 定义左边框背景图片 |
border-right-image | 定义右边框背景图片 |
(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!