Maison >interface Web >tutoriel HTML >Une astuce pour vous apprendre à utiliser HTML pour ajouter des effets de bordure aux images (explication détaillée du code)

Une astuce pour vous apprendre à utiliser HTML pour ajouter des effets de bordure aux images (explication détaillée du code)

奋力向前original: 2021-08-19 18:39:2821170parcourir

Dans l'article précédent "Vous apprendre étape par étape comment utiliser CSS pour créer un effet de bouton arrondi (explication détaillée du code)", je vous ai présenté comment utiliser CSS pour créer un effet de bouton arrondi. L'article suivant vous présentera comment utiliser HTML pour ajouter des effets de bordure aux images. Voyons comment le faire ensemble

Comment ajouter des effets de bordure aux images

1 Ouvrez le logiciel de code HTML, créez un. coder et ajouter des effets d'image Il existe deux méthodes

Une méthode : ajouter un trait à l'image ou ajouter un trait à la zone extérieure.

Deuxième méthode : ajoutez directement la balise d'image img.

Choisissez l'une des deux options, j'utilise la deuxième méthode.

Exemple de code

<style>
<div>{
 margin-top:50px;
 margin-left: 100px: 
}
</style>
</head>
<body>
<div>
<img  src="787.jpg" alt="Une astuce pour vous apprendre à utiliser HTML pour ajouter des effets de bordure aux images (explication détaillée du code)" >
</div>

Effet de code

Une astuce pour vous apprendre à utiliser HTML pour ajouter des effets de bordure aux images (explication détaillée du code)

L'effet de code est sorti et j'ai découvert qu'il n'y avait pas de frontière.

2. Ajoutez des paramètres de bordure à l'image, style : style de bordure, les styles incluent solide, pointillé, etc. La couleur est définie par la couleur de la bordure et l'épaisseur est définie par la largeur de la bordure.

Remarque : le style de bordure est de type bordure, c'est important, sinon tous les autres attributs seront invalides.

div img{
border-style: dashed;
border-width: 5px;
border-color: blue;

Une astuce pour vous apprendre à utiliser HTML pour ajouter des effets de bordure aux images (explication détaillée du code)

Une fois l'effet de code sorti, c'est une couleur de bordure, et maintenant la bordure est composée d'une ligne pointillée

3 Combinez ces trois attributs en un seul attribut, comme border:dashted 5px blue l'effet ; C'est toujours le même. Pareil, très pratique.

div img{
border:dashed 5px blue;
}

Une astuce pour vous apprendre à utiliser HTML pour ajouter des effets de bordure aux images (explication détaillée du code)

L'effet de code est toujours le même, car les trois attributs sont combinés en un seul attribut. Ensuite, nous choisissons d'ajouter des effets uniquement sur un côté de l'image.

4. Gauche : bordure gauche, droite : bordure droite, haut : bordure supérieure, bas : bordure gauche Selon ce paramètre, n'importe quel côté peut être défini indépendamment.

div img{
border:dashed 5px blue;
border-right:solid 10px blue; 
border-top: solid 10px blue;
    border-bottom: solid 10px blue;
    border-left:  solid 10px blue;
}

Une astuce pour vous apprendre à utiliser HTML pour ajouter des effets de bordure aux images (explication détaillée du code)

5. L'effet de code est sorti. Il est presque dans cet état. La largeur de la bordure peut-elle être agrandie ? Contrôlez la couleur de la bordure via l'attribut border du div, définissez la largeur de la bordure sur 20px et la couleur sur bleu

div img{
	border:dashed 5px blue;
	border-right:solid 20px blue; 
	border-top: solid 20px blue;
    border-bottom: solid 20px blue;
    border-left:  solid 20px blue

Une astuce pour vous apprendre à utiliser HTML pour ajouter des effets de bordure aux images (explication détaillée du code)

L'effet final.

Notes : La composition de l'attribut d'abréviation de bordure

border-width : spécifie la largeur de la bordure
border-style : spécifie le style de la bordure
border-color ; la couleur de la bordure.

Apprentissage recommandé : Tutoriel vidéo HTML

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Apprenez étape par étape à utiliser CSS pour créer un effet de bouton arrondi (explication détaillée du code)Article suivant：Apprenez étape par étape à utiliser CSS pour créer un effet de bouton arrondi (explication détaillée du code)

Articles Liés

Voir plus