Le immagini sono la parte più cruciale delle pagine Web utilizzate per rendere i siti Web più attraenti e informativi. Inoltre, gli sviluppatori Web possono inserire vari tipi di immagini, come immagini di sfondo, illustratori e immagini di prodotti. Inoltre, gli utenti possono applicare stili diversi alle immagini, come definire i confini attorno a un'immagine.

Questo articolo indicherà:

• Come aggiungere un'immagine in HTML?
• Come aggiungere/inserire un bordo a un'immagine in HTML?
• Come aggiungere/inserire un bordo a un'immagine in CSS?

Come aggiungere un'immagine in HTML?

Per aggiungere un'immagine in un documento HTML, seguire le istruzioni elencate:

• Innanzitutto, utilizza qualsiasi tag di intestazione "

  " A "

  "Per incorporare l'intestazione. Ad esempio, abbiamo incorporato l'intestazione del livello due con l'aiuto del "

  "Tag.

• Successivamente, inserisci un elemento "" insieme agli attributi "Classe", "SRC" e "Alt".
• ""Il tag viene utilizzato per aggiungere un'immagine a un documento HTML.
• IL "classe"L'attributo viene utilizzato per puntare la classe in CSS.
• "src"Viene utilizzato per specificare l'URL o la fonte dell'immagine.
• "Al"Specifica un nome o un testo alternativo per l'immagine:

Aggiungi bordo a un'immagine

Si può osservare che l'immagine è stata aggiunta correttamente a una pagina HTML:

Come aggiungere/inserire un bordo a un'immagine in HTML?

Per aggiungere un bordo a un'immagine in HTML, utilizzare il CSS in linea direttamente nella fonte dell'immagine con l'aiuto di istruzioni fornite:

• Nel "Tag, specifica il "stile"Attributo. Il valore di "stile" definisce le proprietà del CSS per lo styling dell'elemento definito.
• Per applicare un bordo attorno all'immagine, utilizzare il valore di stile "bordo: 5px verde solido;", Dove "confine"La proprietà CSS è utilizzata per l'aggiunta del confine attorno all'elemento, secondo lo stile specificato:

Aggiungi bordo a un'immagine

Produzione

Come aggiungere/inserire un bordo a un'immagine in CSS?

Gli utenti possono anche aggiungere un bordo a un'immagine in HTML usando CSS incorporato. Per aggiungere un bordo fuori dall'immagine utilizzando il CSS, passare attraverso i passaggi forniti.

Passaggio 1: intestazione di stile in CSS
Innanzitutto, modella l'intestazione utilizzando il nome del tag "H2"E applicare le proprietà CSS di seguito:

H2
Testo-align: centro;
colore blu;
FONT: audace;

Qui:

• IL "allineamento"La proprietà viene utilizzata per l'impostazione dell'allineamento del testo.
• "colore"Specifica il colore particolare per il testo.
• "font"È usato per allocare lo stile per il carattere.

Passaggio 2: aggiungi il bordo a un'immagine
Per aggiungere un bordo attorno all'immagine, prima, accedi all'immagine in CSS con l'aiuto di ".img-container" classe. Quindi, applica le seguenti proprietà su di esso:

.img-container
Altezza: 400px;
Size di background: contenere;
larghezza: 350px;
Bordo: 7px Solid RGB (63, 11, 253);
Margine: 20px 150px;

La descrizione delle proprietà di cui sopra è la seguente:

• "confine"La proprietà viene utilizzata per specificare il bordo attorno all'elemento.
• "altezza"Viene utilizzato per impostare l'altezza dell'elemento definito.
• "Size di sfondo"La proprietà CSS viene utilizzata per impostare la dimensione dell'elemento.
• "larghezza"Definisce la dimensione della larghezza di un elemento.
• "margine"Specifica lo spazio vuoto attorno al limite dell'elemento:

Si può notare che un bordo blu è stato aggiunto attorno a un'immagine.

Conclusione

Per aggiungere un bordo a un'immagine in HTML, prima di tutto, aggiungi un'immagine usando ""Tag. Quindi, l'utente può utilizzare il "stile"Attributo all'interno del tag" "e impostare il suo valore secondo i requisiti. Inoltre, gli utenti possono anche utilizzare il CSS incorporato per applicare il "confine"Proprietà a un'immagine. Questo post ha spiegato la procedura per l'aggiunta del bordo a un'immagine in HTML.