In HTML, per disegnare o posizionare i bordi all'interno di un contenitore di div, esiste un metodo semplice. Gli utenti possono utilizzare il CSS "confine"Proprietà e spostarla all'interno della scatola dell'elemento usando il CSS"Box-Shadow"Proprietà con un valore inserito e impostare il valore. Inoltre, "scatola"Viene utilizzato per definire la dimensione della casella e il valore"Border-Box"Include imbottitura e bordo nella larghezza e altezza dell'elemento.

Questo post spiegherà la procedura per posizionare il bordo all'interno del div e non sul bordo.

Come posizionare il bordo all'interno di Div e non sul suo bordo?

Per posizionare il bordo all'interno del div e non sul bordo, prova la procedura menzionata.

Passaggio 1: inserire l'intestazione

Innanzitutto, aggiungi un'intestazione con l'aiuto di un tag di intestazione da "

" A "

". Per farlo, il

Il tag è utilizzato:

Linuxhint Ltd UK

Passaggio 2: crea un contenitore div

Successivamente, utilizza il “"Tag per creare un contenitore. Inoltre, inserire l'attributo di classe all'interno del tag di apertura DIV. Gli utenti possono anche aggiungere più attributi di classe nel contenitore singolo div assegnando nomi a un attributo di classe. Ad esempio, imposteremo tre nomi di classe diversi in un contenitore "scatola","cerchio", E "confine":

Passaggio 3: intestazione di stile

Quindi, accedi all'intestazione e applica diverse proprietà CSS per lo styling:

H1
Font in stile: corsivo;
colore blu;

Qui:

• "stile carattere"La proprietà specifica lo stile del carattere come"corsivo".
• "colore"È utilizzato per impostare il colore dell'intestazione come"blu".

Passaggio 4: classe "box" di stile

Ora, accedi al ".scatola"Classe usando il selettore DOT. Quindi, applica le seguenti proprietà CSS:

.scatola
Altezza: 160px;
larghezza: 160px;
Background: RGB (161, 229, 250);
Margine: 20px 50px;

Secondo lo snippet di codice dato:

• "altezza"Definisce la dimensione dell'elemento verticalmente.
• "larghezza"La proprietà alloca una larghezza specifica all'elemento.
• "sfondo"La proprietà imposta un colore specifico sullo sfondo dell'elemento.
• "margine"Definisce gli spazi attorno all'elemento.

Produzione

Passaggio 5: classe "bordo"

Utilizzare il ".confine"Per accedere alla seconda classe e applicare le proprietà elencate di seguito:

.confine
Bordo: 20px Solid RGB (161, 229, 250);
Dimensizzazione di scatole: bordo-box;
Box-Shadow: inserto 0px 0px 0px 12px RGB (15, 15, 15);

Qui:

• "confine"La proprietà definisce un confine al di fuori dell'elemento.
• "scatola"È utilizzato per definire le dimensioni della scatola e il valore"Border-Box"Include imbottitura e bordo nella larghezza e altezza dell'elemento.
• "Box-Shadow"La proprietà inserisce un'ombra al di fuori di un elemento. Per farlo, il "inserto"Il valore è impostato con un colore specifico come"RGB (15, 15, 15)".

Produzione

Passaggio 6: classe "Circle" di stile

Accedi alla terza classe utilizzando il suo ".cerchio":

.cerchio
raggio di frontiera: 50%;

Quindi, applica il "raggio di confine"Proprietà per fare il giro della curva da tutti i lati. Più specificamente, verrà utilizzato per rendere l'angolo del bordo esterno attorno a forma di un elemento. Gli utenti possono creare angoli circolari con l'aiuto di un singolo raggio o angoli ellittici con due raggi.

Produzione

Si trattava di posizionare il bordo all'interno del div e non sul bordo.

Conclusione

Per posizionare il bordo all'interno del div e non sul bordo, crea prima un contenitore div con l'aiuto di "". Quindi, aggiungi un bordo usando il "confine"Proprietà e utilizza"dimensionamento della scatola"Per definire le dimensioni della scatola. Il suo valore include un bordo e imbottitura nella larghezza e altezza dell'elemento. Dopodiché, utilizza il "Box-Shadow"Proprietà che inserisce un'ombra fuori da un elemento. Questo articolo ha dimostrato la procedura per posizionare il bordo all'interno di un div ma non sul bordo.