Come impostare il bordo interno in CSS

Quando un bordo viene posizionato all'interno del contenitore, è noto come il bordo interno. I bordi interni sono utilizzati per rendere stabile il contenitore. Quando viene creato un contenitore, la sua altezza e larghezza di solito si espandono con l'aggiunta di proprietà diverse, come l'imbottitura. Per evitare questa situazione, un confine è posto all'interno del contenitore.

In questo articolo, impareremo come impostare il confine interiore in CSS.

Come impostare il bordo interno in CSS?

In CSS, può essere impostato un bordo interno utilizzando le seguenti proprietà:

• Proprietà del dimensionamento della scatola
• Proprietà del contorno
• Proprietà Box-Shadow

Esploriamo ogni proprietà con esempi utili.

Metodo 1: utilizzando la proprietà di dimensioni di box per impostare il bordo interno in CSS

IL "dimensionamento della scatola"La proprietà mantiene l'altezza e la larghezza del contenitore quando viene aggiunta l'imbottitura o il bordo. Quando la proprietà del dimensionamento della scatola viene utilizzata con il “Border-Box"Valore, l'imbottitura e il bordo dell'elemento saranno inclusi nell'altezza e nella larghezza totale.

Ora, controlla l'esempio fornito.

Esempio

Attualmente, la nostra pagina web ha un contenitore con altezza e larghezza impostata come "250px". Tuttavia, quando abbiamo aggiunto un bordo, il valore di altezza e larghezza specificati si espande a "276px", Che può essere visto nell'immagine di seguito:

Nel nostro file HTML, abbiamo aggiunto un ""Con una classe"esempio"E lo ha messo all'interno del""Tag:

Per lo styling del contenitore creato, metti un "."Prima del nome della classe come".esempio". Quindi, specifica l'altezza e la larghezza come "250px", impostare il "13px”Bordo arancione e usa il"Border-Box"Come proprietà di dimensionamento della scatola. Inoltre, abbiamo anche impostato il "colore di sfondo" COME "Aqua"Per distinguere tra lo sfondo e il bordo aggiunto.

Salva il codice fornito e apri il file HTML nel browser:

.esempio
Background-color: Aqua;
larghezza: 250px;
Altezza: 250px;
Bordo: 13px Solid Orange;
Dimensizzazione di scatole: bordo-box;

Di conseguenza, il bordo verrà aggiunto all'interno del contenitore e l'altezza e la larghezza rimarranno uguali:

Andare avanti verso il metodo successivo!

Metodo 2: utilizzando la proprietà di schema per impostare il bordo interno in CSS

Il CSS "contorno"La proprietà aggiunge facilmente una linea attorno alla scatola dell'elemento con la larghezza, il colore e il tipo desiderati. Ciò significa che possiamo utilizzare la proprietà del contorno per impostare il bordo interno. Inoltre, il "Offset del contorno " La proprietà aiuta a limitare l'espansione del confine.

Esempio

Specificare la "contorno"Proprietà con il valore"Solid 12px Orange", Dove l'arancione è il colore per la linea e 12px è la larghezza e solido è un tipo di stile per la linea. Quindi, usa il "Offset del contorno"Proprietà insieme al"-12px" valore. Ciò metterà il bordo all'interno del contenitore e tratteggerà l'espansione rispetto al contenitore:

.esempio
Background-color: Aqua;
larghezza: 250px;
Altezza: 250px;
Contorno: solido 12px arancione;
Offset di contorno: -12px;

Produzione

Hovering sul contenitore aggiunto mostrerà la sua dimensione attuale che è "250 x 250"Come specificato nel file HTML:

Vuoi impostare un bordo interno usando le ombre? Dai un'occhiata alla sezione seguente.

Metodo 3: utilizzando la proprietà Box-Shadow per impostare il bordo interno in CSS

IL "Box-Shadow"La proprietà viene utilizzata principalmente per far cadere le ombre dai frame degli elementi. Tuttavia, l'uso di questa proprietà in un certo modo può impostare il bordo interno in modo efficiente.

Esempio

Nel file HTML, indica il "Box-Shadow"Proprietà con il valore"inserto 0px 0px 0px 12px arancione", Dove l'arancione è un colore, 12px farà l'ombra più ampia e l'inserto posizionerà l'ombra all'interno del contenitore. Gli altri valori 0px sono correlati all'offsetting e alla sfocatura. La combinazione di tutti questi valori formerà un bordo interno usando le ombre:

.esempio
Background-color: Aqua;
larghezza: 250px;
Altezza: 250px;
Box-Shadow: inserto 0px 0px 0px 12px Orange;

Produzione

Per verificare se i valori di altezza e larghezza sono sempre gli stessi, visualizza la dimensione del contenitore in bilcarla su di essa:

Abbiamo offerto i metodi più appropriati per impostare i bordi interni in CSS.

Conclusione

Per impostare il bordo interno, puoi usare il "dimensionamento della scatola","contorno", E "Box-Shadow"Proprietà CSS. La proprietà in scatola viene utilizzata per limitare l'espansione del bordo aggiunto. La proprietà del contorno viene utilizzata in combinazione con l'offset del profilo per l'aggiunta di uno schema come bordo interno. Inoltre, le ombre possono anche essere utilizzate per lo scopo specificato con l'aiuto della proprietà Box-Shadow. In questo post, abbiamo descritto tre metodi per impostare il bordo interno in CSS.