Lo stile di un sito Web HTML è controllato da CSS, che è anche una parte fondamentale di HTML. Una delle proprietà di styling fornite da CSS è la "confine" proprietà. Principalmente i bordi vengono creati al di fuori degli elementi, ma CSS ci consente di inserire un bordo all'interno di un elemento con l'aiuto di proprietà diverse, che sono shadow, contorno e dimensionamento della scatola.

In questo articolo, impareremo la procedura per posizionare i confini all'interno del div usando:

• Proprietà Box-Shadow
• Schema con proprietà Offset di schema
• Proprietà del dimensionamento della scatola

Quindi iniziamo!

Metodo 1: posizionare un bordo all'interno di un div usando la proprietà "box-shadow"

Possiamo posizionare un bordo all'interno del div usando il "Box-Shadow" proprietà. Quindi, prima, attraversa la proprietà Box-Shadow e la sua funzionalità.

Qual è la proprietà "Box-Shadow"?

In CSS, il “Box-Shadow"La proprietà ci consente di impostare un'ombra su qualsiasi elemento o immagine. Questa proprietà si basa sui seguenti valori:

• offset-x: È usato per aggiungere un'ombra orizzontale.
• offset-y: È usato per aggiungere un'ombra verticale.
• colore: Viene utilizzato per posizionare il colore dell'ombra.

Sintassi

Per chiarire questi punti, passiamo alla sintassi della proprietà Box-Shadow:

Box-Shadow: Offset-X Offset-Y BluR-RADIUS Spenpend Color Inserto;

Ecco la descrizione relativa ai valori sopra menzionati:

• "offset-x" E "offset-y"Può essere positivo o negativo.
• "ra-radius"Rende l'ombra più luminosa o più chiara.
• Usando "diffusione", Puoi impostare le dimensioni dell'ombra.
• Al posto di "colore", Assegnerai qualsiasi colore che desideri dare all'immagine.
• "inserto"Viene utilizzato per impostare l'ombra all'interno dell'elemento. Se non lo usi, un'ombra apparirà fuori dagli schemi.

Nota: "ra-radius","diffusione", E "inserto"Sono i valori opzionali della proprietà Box-Shadow. È possibile utilizzare questi valori in alcuni casi speciali.

Per una migliore comprensione dell'uso della proprietà Box-Shadow, implementiamo un esempio pratico.

Esempio

Nella sezione HTML, creeremo un contenitore usando tag e intestazione

dentro.

Html

"Bordo solido all'interno del Div"

Successivamente, nel file CSS, useremo "div"Per accedere al Div già creato e posizionare il bordo al suo interno tramite le istruzioni fornite:

• Imposta la larghezza e l'altezza del div come "700px" E "250px".
• Specificare il colore del testo come "RGB (13, 214, 214)".
• Impostare i valori per l'allineamento del testo usando la proprietà della linea di linea come "200px"E proprietà allineate al testo come"centro".
• Usando la proprietà di sfondo, imposta il colore di sfondo del div come "nero".
• Crea un bordo usando la proprietà di confine con "15px" larghezza, "solido"Forma e"nero" colore.
• Per l'ombra interna, usa il “Box-Shadow"Proprietà e imposta il valore di Offset-X, Offset-Y e Blur come"0px", Diffuso come"5px", Il colore dell'ombra come"RGB (255, 251, 0)"E usa"inserto"Posizionare il bordo all'interno del div.

CSS

div
larghezza: 700px;
Altezza: 250px;
Colore: RGB (255, 238, 0);
Line-Height: 200px;
Testo-align: centro;
Sfondo: nero;
Bordo: 15px Black solido;
box-shadow: 0px 0px 0px 5px rgb (255, 238, 0) inserto;

Nota: Il valore di offset-x e offset-y è impostato come 0 perché abbiamo bisogno di confini su tutti i lati del div.

Dopo aver implementato il codice dato, vai al file HTML ed eseguilo per vedere il seguente risultato:

Nota: Aumentando il valore del "diffusione", Puoi aumentare la larghezza del confine.

Metodo 2: posizionare un bordo all'interno di un div usando la proprietà "schema" e "outsese-offset"

IL "contorno"La proprietà viene utilizzata per impostare la linea all'esterno dell'elemento. È la proprietà stensa di "Wididth","stile del contorno", E "contorno". La sintassi della proprietà del contorno è la seguente:

Schema: contorno a larghezza del contorno con il contorno del contorno

Ecco la descrizione relativa ai valori sopra menzionati:

• Licromra del contorno: Viene utilizzato per impostare la larghezza del contorno.
• stile contorno: Viene utilizzato per impostare lo stile del contorno.
• contorno: color: Viene utilizzato per specificare il colore del contorno.

Allo stesso modo, il "Offset del contorno"La proprietà viene utilizzata per impostare lo spazio tra il bordo dell'elemento e il contorno. Questo spazio è trasparente. La sintassi della proprietà dell'offset di schema è:

Offset di contorno: valore

Nel luogo del valore, puoi impostare lo spazio che si desidera impostare tra il bordo dell'elemento e il contorno. Crea uno schema all'interno dell'elemento quando viene specificato un valore negativo.

Passiamo all'esempio della creazione di un bordo all'interno del div.

Esempio

In questo esempio, creeremo due div con nomi di classe "Div1" E "Div2"E aggiungi una voce al suo interno usando

etichetta.

Html

"Border della cresta all'interno del div"

"Doppio bordo all'interno del div"

In CSS, usa "Div1"Per accedere al contenitore che abbiamo creato nel file HTML. Per inserire il bordo all'interno del div, seguire le istruzioni fornite:

• Imposta la larghezza e l'altezza del div come "500px".
• Regola il raggio del confine su "50%".
• Imposta il colore del testo come "RGB (13, 214, 214)".
• Impostare i valori per l'allineamento del testo usando la proprietà della linea di linea come "500px"E proprietà allineate al testo come"centro".
• Usando la proprietà di sfondo, imposta il colore di sfondo del div come "nero".
• Crea un bordo usando la proprietà di confine come "15px","solido", E "nero".
• Per il bordo interno, usa il "contorno"Proprietà e impostare il valore come"10px","cresta", E "RGB (0, 255, 242)"E imposta il valore di"Offset del contorno" COME "-25px"Posizionare il bordo all'interno del div.

CSS

.Div1
larghezza: 500px;
Altezza: 500px;
raggio di frontiera: 50%;
Colore: RGB (13, 214, 214);
linea di linea: 500px;
Testo-align: centro;
Sfondo: nero;
Schema: 10px Ridge RGB (0, 255, 242);
Offset di contorno: -25px;

Per lo stile del secondo div, cambia solo lo stile del contorno usando il "contorno"Proprietà e imposta i valori come segue:

Schema: 10px Double RGB (0, 255, 242);

Metodo 3: posizionare un bordo all'interno di un div usando proprietà "dimensionamento della scatola"

CSS "dimensionamento della scatola"La proprietà calcola la larghezza e l'altezza dell'elemento. La sintassi della proprietà in scatola è:

Dimensione della scatola: valore

Nel luogo del valore, puoi impostare il valore del dimensionamento della scatola come "Content-Box" E "Border-Box".

Esempio

Nell'esempio di seguito indicato, creeremo un nome di classe Div "Div1"E aggiungi una voce al suo interno.

Html

"Groove Bordo all'interno del Div"

Nel CSS, useremo "Div1"Per accedere al Div creato. Successivamente, inserire il bordo all'interno del div come segue:

• Imposta la larghezza e l'altezza del div come "550px".
• Imposta il colore del testo come "RGB (2, 255, 137)".
• Impostare i valori per l'allineamento del testo usando la proprietà della linea di linea come "420px"E proprietà allineate al testo come"centro".
• Usando la proprietà di sfondo, imposta il colore di sfondo del div come "nero".
• Crea un bordo usando le proprietà del bordo come "50px","scanalatura", E "RGB (81, 255, 0)".
• Successivamente, usa il “confine"Proprietà e impostare il valore come"50px","scanalatura", E "RGB (81, 255, 0)"E imposta il valore di"dimensionamento della scatola" COME "Border-Box"Posizionare il bordo all'interno del div.

.Div1
larghezza: 550px;
Altezza: 550px;
Colore: RGB (2, 255, 137);
linea di linea: 420px;
Testo-align: centro;
Sfondo: nero;
Bordo: 30px scanalatura RGB (81, 255, 0);
Dimensizzazione di scatole: bordo-box;

Dopo aver implementato il codice dato, vedrai il seguente output:

Abbiamo fornito i tre modi più semplici per posizionare un bordo all'interno di un div usando CSS.

Conclusione

Per posizionare un bordo all'interno del div, prima, creare un bordo usando il "confine"Proprietà, quindi usa il"Box-Shadow" E "contorno" con "Offset del contorno" E "dimensionamento della scatola"Proprietà di CSS. La proprietà del bordo crea un bordo attorno all'elemento e le altre quattro proprietà possono essere utilizzate per spostare il bordo all'interno del div. Come risultato di questo articolo, ti abbiamo mostrato i tre metodi più semplici per posizionare i confini all'interno del div.
Per posizionare un bordo all'interno del div, prima, creare un bordo usando il "confine"Proprietà, quindi usa il"Box-Shadow" E "contorno" con "Offset del contorno" E "dimensionamento della scatola"Proprietà di CSS. La proprietà del bordo crea un bordo attorno all'elemento e le altre quattro proprietà possono essere utilizzate per spostare il bordo all'interno del div. Come risultato di questo articolo, ti abbiamo mostrato i tre metodi più semplici per posizionare i confini all'interno del div.