Opacità del confine CSS

“In questo articolo, discuteremo dell'opacità di frontiera in CSS per una pagina HTML. Lo styling di un bordo viene eseguito su un foglio di stile a cascata in cui l'opacità del bordo verrà modificata usando il blocco note ++ IDE per la modifica del file HTML. Notepad ++ ci consente di creare un file HTML che sarà in grado di eseguire sul nostro browser preferito; Possiamo anche modificare gli stili usando CSS. Useremo i fenomeni di opacità per rendere un confine opaco di vari gradi mentre dividiamo anche la semitrasparenza in porzioni distinte del bordo."

Opacità al confine

I bordi vengono utilizzati per racchiudere molte cose come testo, immagini o qualsiasi altra forma di dati, poiché sappiamo che ogni aspetto o elemento nel linguaggio di markup iper -testo può essere disegnato usando CSS. Quindi, useremo CSS per modellare un bordo rendendolo opaco e semitrasparente. I CSS possono essere eseguiti in diversi modi come tag di stile CSS o CSS in linea, che possono avere alcuni diversi tipi di effetti sul bordo. La sceneggiatura di base per rendere opaco di confine e controllare la sua trasparenza in una certa misura in CSS è scritta di seguito:

"Border: 1px Solid RGBA (0, 0, 0);"

Nella sceneggiatura sopra, possiamo vedere che l'entità è chiamata con il suo nome, la sua dimensione è definita nei pixel e il colore è definito in formato "RGBA", che esaminerà la codifica del colore e la trasparenza del bordo.

Ora implementeremo questo concetto scrivendo lo script in Blocco note e eseguendolo su un browser.

Esempio 01: Utilizzo di CSS in un tag testa in un file HTML

In questo esempio, realizzeremo un file HTML con un "div" con bordi e il "div" includerà alcune informazioni sul tag di stile tra il tag della testa del file HTML.

Nello script sopra, possiamo vedere che il tag principale del file HTML ha due tag. Nel primo tag, il titolo del file è scritto e il secondo tag, che è il tag di stile, ha le proprietà visive di come apparirà un "div" quando il file viene eseguito su un browser. In questa parte del codice, la proprietà di imbottitura è definita nei pixel, quindi le proprietà per il bordo del div sono definite dandogli dimensioni e il formato di colore nel metodo RGBA standard in cui l'ultimo parametro è per l'opacità e noi gli hanno dato un certo valore. Quindi chiuderemo il tag di stile insieme al tag della testa. Dopo questo, apriremo l'etichetta del corpo e daremo un titolo al corpo e quindi un div che ha un po 'di stile fatto attraverso l'intestazione CSS, che sarà applicabile su ogni div nel file HTML.

Dopo questo, salveremo questo file in ".Formato HTML "e apri questo file sul nostro browser per visualizzare il file.

Nel frammento di cui sopra, possiamo vedere che l'intestazione che è stata fornita nel tag del corpo è presente insieme a un contenitore Div in cui è scritto un po 'di testo. Questo contenitore Div ha anche un bordo semitrasparente rosso, il che significa che il bordo ha una certa opacità definita nel tag di stile dell'intestazione del file HTML.

Esempio 02: Utilizzo di CSS per rendere il massimo opaco del bordo in un file HTML

In questo esempio, creeremo un file HTML con un "div" che ha bordi e il "div" avrà alcuni dettagli sul tag di stile tra il tag della testa del file HTML, ma in questo caso aggiungiamo un altro tag Questo sarà solo opaco della parte superiore del confine.

Lo script sopra mostra che la testa del file HTML ha due tag. Il titolo del file è scritto nel primo tag e il tag di stile ha gli attributi visivi di come sarebbe un "div" quando il file viene eseguito su un browser. Il valore di imbottitura è fornito in pixel in questa parte del codice e le proprietà per il bordo del div sono stabilite fornendole un formato di dimensioni e colori nel metodo RGBA standard, con l'ultimo parametro opacità, che abbiamo impostato su " 0."

Successivamente, abbiamo aperto un tag bordo-top nel formato RGBA e questa volta imposteremo l'opzione opaca su un valore che renderà solo il semitrasparente superiore. Il tag di stile e il tag Head saranno successivamente chiusi. Successivamente, apriremo il tag del corpo e gli daremo una voce, seguito da un div con un po 'di stile applicato tramite l'intestazione CSS, che verrà applicata a ogni div nel file HTML.

Dopodiché, salveremo lo script in ".HTML ”formato e aprilo nel nostro browser per visualizzarlo.

Possiamo vedere nello snippet sopra che è presente l'intestazione dal tag corpo. Il bordo ha anche un top semitrasparente rosso, indicando che la parte superiore del bordo ha un po 'di opacità, che è stata determinata dal tag di stile dell'intestazione del file HTML.

Esempio 03: Utilizzo di CSS per rendere opaca la parte inferiore del bordo e differenziando il suo colore dai lati e in alto in un file HTML

In questo esempio, costruiremo un file HTML con un "div" che ha bordi e il "div" avrà alcune informazioni sul tag di stile tra il tag principale del file HTML, ma in questo caso, ne aggiungeremo altri due altri Tag che faranno opaco la sezione inferiore del bordo.

Lo script seguente dimostra che l'elemento principale del file HTML ha due tag. Il primo tag contiene il titolo del file e il tag di stile contiene gli elementi visivi di come sarebbe apparita un "div" quando il file viene eseguito in un browser. Il valore di imbottitura è fornito in pixel in questa parte del codice e le proprietà per il bordo del div sono stabilite fornendole un formato di dimensioni e colori nel metodo RGBA standard, con l'ultimo parametro opacità, che abbiamo impostato su " 0."

Successivamente, abbiamo aperto un tag Border-Bottom RGBA e modificato i parametri del colore a un nuovo colore. Abbiamo quindi aperto di nuovo il tag Border-Bottom e abbiamo cambiato il parametro di opacità in “0.2 "per creare la sezione inferiore del semitrasparente del bordo. Successivamente, lo stile e le etichette della testa saranno chiuse. Successivamente, apriremo l'elemento corporeo e aggiungiamo una testa ad esso, seguita da un div con un po 'di stile applicato tramite l'intestazione CSS, che verrà applicata a tutti i div nel file HTML.

Lo script verrà quindi salvato in ".formato html "e aperto nel nostro browser per essere visto.

Lo snippet sopra mostra l'intestazione dal tag del corpo, nonché un contenitore di div con un po 'di testo. Il bordo ha anche un fondo semitrasparente grigio, suggerendo che la sezione inferiore del bordo ha un po 'di opacità e colore distinto, come specificato nel tag stile di intestazione del file HTML.

Conclusione

In questo articolo, abbiamo discusso di diversi metodi per aggiungere opacità a un confine in CSS. Come abbiamo discusso, CSS ci consente di modellare e modificare ogni elemento di una pagina HTML, che include un contenitore div con un bordo. Abbiamo implementato questo fenomeno su una pagina HTML e apportato diverse modifiche allo stile apportando modifiche al tag in stile CSS nell'ambiente Notepad ++.