CSS Styling è una parte fondamentale di HTML utilizzata per rendere un sito Web presentabile. CSS consente diverse proprietà di stile, una delle quali è "Immagine di confine" proprietà. Con l'aiuto della proprietà menzionata, è possibile impostare un'immagine come bordo di un elemento HTML invece del tipico stile di bordo.

Questa guida mostrerà come utilizzare la proprietà dell'immagine di confine CSS.

Come utilizzare la proprietà dell'immagine a confine CSS?

La proprietà dell'immagine di confine viene utilizzata per impostare l'immagine come bordo attorno a un elemento.

Sintassi

La sintassi della proprietà dell'immagine di confine è:

Immagina di confine: ripetizione dell'esposizione di sorgente di sorgente / larghezza

L'immagine di frontiera è una proprietà stentata di CSS con cinque diverse proprietà come:

• fondi di confine: fondi: Viene utilizzato per specificare l'origine dell'immagine.
• bordo-slice: Viene utilizzato per tagliare l'immagine del bordo.
• Larghezza dell'immagine di confine: È utilizzato per impostare la larghezza del bordo.
• bordo-immagine-outset: Viene utilizzato per impostare la quantità di spazio l'immagine di bordo occupa dal telaio del bordo.
• Ripeato dell'immagine di frontiera: Viene utilizzato per evitare la ripetizione dell'immagine di frontiera e riempire l'area di confine.

Nota: Se specifichiamo solo l'origine dell'immagine anziché tutti i valori, il bordo dell'immagine è impostato in base ai valori predefiniti di queste proprietà.

Per capire perfettamente, spostati all'esempio pratico della proprietà dell'immagine di frontiera.

Esempio: impostazione di un'immagine come bordo con proprietà dell'immagine del bordo

Per creare un bordo di immagine attorno a un elemento, prima, aggiungi un elemento in un file HTML. Per fare ciò, creeremo un e assegneremo un "confine"Classe ad esso. Successivamente, aggiungeremo un titolo e un paragrafo utilizzando

E

tag.

Html

Linuxhint

Bordo dell'immagine

Ora, spostati su CSS e applica la proprietà dell'immagine di confine al contenitore creato.

Qui, abbiamo usato ".confine"Per accedere al Div creato nell'HTML. Successivamente, applicheremo il “confine"Proprietà ad essa e imposta i valori del bordo come"30px" E "solido"Rispettivamente. Nel prossimo passaggio, useremo il "Immagine di confine"Proprietà e imposta i valori di sorgente, fetta, larghezza, inizio e ripeti come"Immagine.jpg","50","30px","40px", E "girare". Inoltre, assegneremo il valore della proprietà allineale come "centro", Proprietà delle dimensioni di un carattere come"50px"E la proprietà del colore come"RGB (3, 59, 7)"Per modellare l'intestazione e il paragrafo.

CSS

.confine
bordo: 30px solido;
Imaga di confine: URL ('Immagine.jpg ') 50 / 30px 40px round;
Testo-align: centro;
Font-size: 50px;
Colore: RGB (3, 59, 7);

Una volta implementato il codice sopra menzionato, vai al file HTML ed eseguilo. Di conseguenza, vedrai il seguente output:

L'immagine di cui sopra indica che la proprietà dell'immagine di confine viene implementata con successo.

Esempio 2: Impostazione di un'immagine come bordo con valori predefiniti della proprietà dell'immagine del bordo

In questo esempio, specificheremo solo l'origine dell'immagine e ne verificheremo l'effetto sulla proprietà del confine delle immagini.
Qui, assegneremo solo la fonte dell'immagine come "Immagine.jpg"Alla proprietà dell'immagine di frontiera. Le proprietà rimanenti saranno le stesse, secondo l'esempio precedente.

CSS

.confine
bordo: 30px solido;
Imaga di confine: URL ('Immagine.jpg ');
Testo-align: centro;
Font-size: 50px;
Colore: RGB (3, 59, 7);

Produzione

Qui, possiamo vedere che il bordo dell'immagine è posto solo agli angoli del div. È perché il "Immagine di confine"La proprietà utilizza valori predefiniti per tutti i parametri rimanenti.

Conclusione

IL "Immagine di confine"La proprietà viene utilizzata per impostare l'immagine come bordo attorno ad eventuali elementi HTML. È possibile impostare valori diversi della proprietà dell'immagine di confine per lo styling del confine. Se non si specificano alcun valori dei suoi parametri, la proprietà del bordo delle immagini applicherà il suo comportamento predefinito. In questo articolo, abbiamo spiegato come aggiungere un'immagine come bordo usando la proprietà dell'immagine di frontiera.