Gli utenti possono applicare più proprietà CSS per rendere attraenti le pagine Web come "altezza","larghezza","allineamento","stile del bordo","raggio di confine", E "imbottitura". Più specificamente, il "confine"La proprietà aggiunge il bordo attorno all'elemento. Inoltre, l'utente potrebbe voler aggiungere un bordo trasparente attorno all'elemento per rendere le cose dietro gli oggetti più visibili. IL "confine"Attributo con il"RGBA"Il valore viene quindi utilizzato per impostare l'opacità del bordo.

Questo post spiegherà il metodo per creare un bordo trasparente con l'aiuto delle proprietà CSS.

Come fare un confine trasparente con CSS?

Per creare un bordo trasparente con CSS, prova la procedura data.

Passaggio 1: crea un contenitore di div

Innanzitutto, crea un ""Contenitore nel corpo HTML. Aggiungi un attributo di classe all'interno dell'elemento.

Passaggio 2: aggiungi l'intestazione

Successivamente, aggiungi una voce con l'aiuto di "

Tag e usa il "allineare"Attributo per specificare l'intestazione al centro del div. Quindi, aggiungi il testo tra i tag di intestazioni aggiunti:

LinuxHint Tutorial Web Web Ltd UK

Produzione

Passaggio 3: impostare il colore di sfondo

corpo
Background-color: RGB (8, 8, 14);

Qui, accedi al corpo con il nome del tag e specifica il colore di sfondo utilizzando il “colore di sfondo" proprietà.

Passaggio 4: intestazione di stile con CSS

H1
Colore: RGB (23, 83, 5);

Ora, applica il "colore"Proprietà per modellare il testo dell'intestazione usando il nome del tag"H1".

Passaggio 5: fare bordo solido

Successivamente, accedi al ".contenuto esterno"Classe e specificare le proprietà CSS menzionate:

.contesto esterno
Bordo: 10px Solid RGB (25, 140, 194);
larghezza: 200px;
Altezza: 200px;
Margine: auto;
Testo-align: centro;
raggio di confine: 7px;
imbottitura: 4px;

Qui:

• IL "confine"La proprietà viene utilizzata per creare un bordo attorno a un elemento.
• IL "larghezza"Specifica la larghezza dell'elemento.
• IL "altezza"La proprietà alloca l'altezza per il contenitore.
• IL "margine"Definisce il lato esterno dello spazio del bordo definito.
• "allineamento"La proprietà viene utilizzata per impostare il testo al centro.
• "raggio di confine"La proprietà arrotonda l'angolo di bordo in base al valore.
• "imbottitura"Specifica lo spazio attorno al contenuto dell'elemento.

Si può notare che è stato messo un bordo solido attorno all'elemento:

Passaggio 6: rendere trasparente il confine

Bordo: 10px Solid RGBA (114, 200, 240, 0.3);

Per rendere trasparente il confine, usa il "confine"Proprietà e assegnare il valore con il"RGBA" color Picker. Qui, i primi tre valori specificano il colore RGB e il quarto valore imposta l'opacità del bordo. Ad esempio, l'opacità è assegnata come "0.3"Per rendere il confine trasparente:

Produzione

Questo blog ha dimostrato le istruzioni per creare un confine trasparente con CSS.

Conclusione

Per creare un bordo trasparente con CSS, in primo luogo, accedi al Div con l'aiuto del specificato "classe". Quindi, utilizza il "confine"Proprietà e imposta il colore e l'opacità del bordo usando il"RGBA" color Picker. Dove "RGB"È per i colori rosso, verde e blu e il"UN"Viene utilizzato per impostare il valore dell'opacità per rendere trasparente il confine. Questo post ha spiegato la procedura per rendere il confine trasparente con CSS.