Maison > Article > interface Web > Comment définir la bordure de l'image avec CSS
Comment définir la bordure de l'image avec CSS
- 青灯夜游original
- 2021-04-29 14:24:2817141parcourir
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!