Bordi inserti CSS

HTML è il linguaggio di programmazione che fornisce il framework per le pagine Web, mentre CSS ci consente di personalizzare gli elementi. Varie proprietà CSS sono specificate per implementare diversi tipi su una pagina Web, tra cui colore di sfondo, dimensioni del carattere, bordo, raggio del bordo e shadow box. Più specificamente, "stile del bordo" E "Box-Shadow"Le proprietà sono utilizzate per l'impostazione degli effetti all'interno o all'esterno del bordo.

Questo post spiegherà i metodi ai confini inseriti in CSS.

Cosa sono i bordi dell'inserto CSS?

Il valore del bordo inserto CSS è ampiamente utilizzato con "stile del bordo"Proprietà per applicare l'effetto del bordo 3D sugli elementi HTML e di solito dipende dal valore del colore del bordo.

Esistono diversi metodi per inserire i bordi nei CSS sono elencati di seguito:

• Metodo 1: Aggiungi bordo inserto con “stile del bordo" proprietà
• Metodo 2: Aggiungi bordo inserto con “Box-Shadow" proprietà

Metodo 1: Aggiungi bordo inserto con proprietà "in stile bordo"

Inserire il confine con "stile del bordo"Proprietà, seguire la procedura data:

• Prima di tutto, crea un'intestazione con il "

  "Tag.

• Quindi, aggiungi il "stile"Attributo per modellare l'intestazione in base alle tue preferenze. Ad esempio, l'intestazione è disegnata come "allineamento del testo: centro".
• Successivamente, aggiungi testo per l'intestazione tra "

  "Tag.

• Creare un contenitore di div e inserire un "id"Attributo:

Bordo inserto

Applicare il bordo inserto CSS usando la proprietà "in stile bordo"

Qui, applica le proprietà CSS sul contenitore div creato:

#Border-Div
Contesto: URL trasparente (emoji.png) 50% no-ripeat;
Min-Height: 300px;
Min-Width: 200px;
Margine: 0px 200px;
Border in stile: inserto;

I dettagli sulle proprietà sopra menzionate sono discussi di seguito:

• IL "sfondo"La proprietà viene utilizzata per l'impostazione di tutte le proprietà in stile sfondo contemporaneamente, come colore, immagine, origine e dimensione o il metodo di ripetizione.
• "Min-height"La proprietà specifica l'altezza più bassa per un elemento.
• "larghezza min"La funzione definisce la minima larghezza per un elemento.
• "margine"La proprietà specifica lo spazio per un elemento attorno al bordo definito.
• "stile del bordo"La proprietà viene utilizzata per lo styling del bordo da visualizzare attorno all'elemento.
• "inserto"Il valore viene utilizzato per creare ombre all'interno della scatola.

Produzione

Passiamo verso un altro metodo per aggiungere un bordo dell'inserto.

Metodo 2: Aggiungi bordo inserto con proprietà "Box-Shadow"

Per applicare il bordo degli inserti con il "Box-Shadow"Proprietà, crea il contenitore Div seguendo lo stesso scenario:

Bordo inserto

Applicare il bordo inserto utilizzando la proprietà "Box-Shadow"

#Border-Div
Contesto: URL trasparente (emoji.png) 50% no-ripeat;
Min-Width: 200px;
Min-Height: 300px;
Margine: 0px 200px;
Box-Shadow: inserto 0 0 10px RGB (228, 164, 27);

Accedi al contenitore Div usando "#Border-Div"Attributo ID e applica le stesse proprietà CSS, tra cui"sfondo","larghezza min","Min-height","margine", E "Box-Shadow". Più specificamente:

• IL "Box-Shadow"La proprietà inserisce un'ombra al di fuori di un elemento.
• "inserto"Il valore è definito come l'ombra all'interno della scatola con un colore specifico"RGB (228, 164, 27)".

Produzione

In alternativa, gli utenti possono aggiungere più valori d'ombra per la costruzione della densità di confine. A tale scopo, segui il codice fornito:

Box-Shadow: inserto 0 0 20px RGB (89, 0, 255), inserto 0 0 20px rgb (0, 183, 255), inserto 0 0 20px rgb (0, 183, 255);

Produzione

Abbiamo dichiarato il metodo per applicare il bordo dell'inserto in CSS.

Conclusione

I bordi dell'inserto CSS sono bordi 3D che sono impostati sugli elementi HTML. Per impostare il bordo degli inserti, il CSS "stile del bordo" E "Box-Shadow"Le proprietà possono essere utilizzate. IL "Inserto"Il valore delle proprietà specificate è definito per creare ombre e molteplici effetti all'interno del bordo. Questo post ha dimostrato i metodi per applicare i bordi dell'inserto in CSS.