Questo blog parlerà di:

• Che cos'è il raggio del contorno?
• Come applicare l'effetto raggio contorno sull'elemento HTML?

Qual è il raggio del contorno?

Il ' schema La proprietà ” viene utilizzata per modellare il contorno dell'elemento, ma non può essere implementata direttamente. Pertanto, il metodo alternativo per applicare l'effetto raggio su un contorno è utilizzare un ' bordo-raggio Proprietà CSS. Specifica gli angoli arrotondati per i contorni.

Come applicare l'effetto raggio contorno sull'elemento HTML?

Per utilizzare la proprietà del raggio del contorno, seguire le istruzioni fornite.

Passaggio 1: incorpora le intestazioni

Inizialmente, incorpora le intestazioni utilizzando qualsiasi tag di intestazione da '

' a '

”. Ad esempio, abbiamo utilizzato il '

' e '

” per incorporare due diverse intestazioni in un documento HTML.

Passaggio 2: aggiungi il primo contenitore div

Successivamente, aggiungi un contenitore utilizzando il '

etichetta '. Inoltre, inserisci il ' classe ” e specifica il nome della classe in base alla tua scelta.

---

---

Passaggio 3: creare un secondo contenitore div

Creane un altro” div ” contenitore seguendo la stessa procedura:

< h1 stile = 'colore:rgb(48, 10, 218)' > Linuxhint LTD Regno Unito < / h1 >

< h2 >

Diversi esempi di border-radius per creare gli angoli di un contorno circolare.

< / h2 >

< div classe = 'box1-div' >

Linuxhint fornisce i contenuti migliori e più unici per i suoi utenti.

< / div >

< div classe = 'scatola2-div' >

Funziona su più categorie.

< / div >

L'output del codice precedente è mostrato di seguito:

Passaggio 4: impostare il contorno del primo contenitore

Accedi al primo contenitore utilizzando il ' .box1-div ” classe dove il “ . ” è un selettore per accedere alla classe:

.box1-div {

schema : solido ;

larghezza : 300 pixel ;

imbottitura : 15px ;

margine : 25px ;

}

Quindi, applica le proprietà CSS elencate di seguito:

• Il ' schema La proprietà ” viene utilizzata per aggiungere un contorno attorno all'elemento. Ad esempio, il suo valore è impostato come ' solido ”.
• “ larghezza ” specifica la dimensione dell'elemento orizzontalmente.
• “ imbottitura ” viene utilizzato per allocare lo spazio attorno al contenuto dell'elemento.
• “ margine ” specifica lo spazio sul lato esterno del bordo dell'elemento.

Passaggio 5: impostare il contorno del secondo contenitore

Ora accedi al secondo elemento con l'aiuto della rispettiva classe ' .box2-div ”:

.box2-div {

schema : solido ;

bordo-raggio : 20px ;

larghezza : 300 pixel ;

imbottitura : 15px ;

margine : 25px ;

}

Applica la proprietà CSS ' bordo-raggio ” per definire il raggio dell'elemento. Questa proprietà consente di aggiungere angoli arrotondati attorno all'elemento:

Si può notare che abbiamo aggiunto con successo l'effetto del raggio del contorno sull'elemento HTML.

Conclusione

Il ' contorno-raggio ' non è più disponibile. Gli utenti possono applicare le proprietà del raggio del contorno con l'aiuto delle proprietà CSS 'outline' e 'border-radius'. Il ' schema ' aggiunge un contorno attorno all'elemento e il ' bordo-raggio ” è specificamente utilizzato per modellare il contorno. Questo post ha dimostrato le istruzioni per aggiungere l'effetto del raggio del contorno attorno all'elemento in HTML.