Bordo trasparente CSS
In questo articolo, creeremo un bordo trasparente in CSS e vedrai che l'oggetto dietro il bordo trasparente è visibile. Esploreremo i diversi esempi qui per fornirti una piena comprensione del concetto di confine trasparente.
Esempio 1:
Apri un nuovo file nel codice Visual Studio. Quando si apre questo file vuoto, selezionare la lingua. Qui, creiamo un codice HTML, quindi scegliamo la lingua HTML. Quando selezioniamo questa lingua, il file creato qui è il file HTML. Quindi, quando salviamo questo file, non abbiamo bisogno di menzionare l'estensione del file. Dopo questo, digita i tag HTML di base o metti "!"E quindi premere" Invio ". Otterrai automaticamente tutti i tag di base richiesti per HTML.
Ora colleghiamo questo file al file CSS che è "trasparente.CSS ". Nel corpo, usiamo prima il tag di intestazione per generare l'intestazione. Dopo questo, creiamo due div con i nomi "interiore" e "esterno". Quindi, di nuovo, posizioniamo un'intestazione che appare all'interno del secondo div. Ora chiudiamo questi div qui. Creiamo qui un bordo trasparente utilizzando la proprietà "bordo" in CSS e impostare il colore RGBA in questa proprietà.
Applichiamo il colore "marrone" alle intestazioni che abbiamo creato in precedenza. Lo "esterno" è per menzionare la prima classe Div e abbiamo impostato la sua "larghezza" su "300px". L '"altezza" di questo primo div è "300px" e il "margine" qui è "10%". Ora, dopo tutte queste proprietà, impostiamo la proprietà "bordo" e impostiamo il suo valore sul valore RGBA. Abbiamo anche impostato il valore Alpha qui per rendere il bordo trasparente. Abbiamo impostato il "bordo" su "10px" "larghezza" e in tipo "solido". L'RGBA che abbiamo impostato qui è “RGBA (0, 0, 0, .4) "dove" RGB (0, 0, 0) "viene utilizzato per il nero. Ma qui, aggiungiamo un valore di trasparenza che è “0.4 ". Il "raggio di confine" è impostato su "5px", quindi i bordi del bordo sono un po 'curvi.
Ora, menzioniamo anche il secondo nome Div qui come "esterno". E utilizziamo alcune proprietà qui per questo secondo div. Dobbiamo impostare le dimensioni di questo secondo div più piccolo del primo div. Quindi, abbiamo impostato la sua "larghezza" e "altezza" su "270px" per ciascuno di essi. Il suo "margine" è "auto" e il "margine-top" è "3%". Abbiamo impostato lo "sfondo" come "rgba (0, 0, 0, 0.4) ", lo stesso del confine del primo div. Il "raggio di confine" qui è anche "5px" e la "imbottitura" che utilizziamo è anche "5px".
Qui, puoi vedere che il bordo è trasparente mentre applichiamo alcuni valori alfa nel valore RGBA del bordo. Se posizioniamo un oggetto dietro questo confine, sarà visibile a noi.
Esempio n. 2:
Questo è il nostro secondo esempio e creiamo un contenitore di div vuoto dopo l'intestazione. Impostiamo l'immagine in questo div e applichiamo un bordo trasparente sull'immagine usando le proprietà CSS.
Abbiamo impostato il "colore" su "H1" come "marrone". Utilizziamo il contenitore "Div" qui e impostiamo la sua "larghezza" su "300px" e la sua "altezza" su "300px". Usiamo anche il "galleggiante" qui per galleggiare questo div per "a sinistra". Impostamo lo "sfondo" di questo div e impostiamo il "mypicture.png "come sfondo di questo div. Posizioniamo il percorso di questa immagine nell'URL e mettiamo questo "URL" come valore della proprietà "background". Utilizziamo la proprietà "margine" e la impostiamo su "20px". La "imbottitura" è anche impostata su "20px". Per il "bordo", utilizziamo il valore "larghezza" per "25px" del tipo "solido". Dato che vogliamo creare un bordo trasparente, dobbiamo usare il colore "RGBA" qui in cui mettiamo il valore alfa per creare un bordo trasparente. Il valore del colore RGBA è “RGBA (143, 9, 9, 0.5) ". I primi tre valori mostrano il colore del tipo rosso ma qui, 0.5 applica un certo effetto di trasparenza su questo confine. Ora, per l'intero "corpo", impostiamo il valore della proprietà "imbottitura" su "90px".
L'output qui contiene un'immagine. Potresti notare il bordo attorno a questa immagine. Questo confine è trasparente in quanto possiamo vedere l'immagine dietro il bordo. Agli angoli dell'immagine, possiamo vedere che il colore dell'immagine svanisce perché abbiamo un bordo trasparente attorno all'immagine.
Esempio #3:
In questo html, creiamo di nuovo solo un div. Ora, usando gli attributi CSS, posizioniamo l'immagine in questo div e applichiamo un bordo trasparente ad esso.
Innanzitutto, dobbiamo posizionare il nome del contenitore div che abbiamo impostato nel codice HTML. Quindi, mettiamo le parentesi graffe. All'interno di queste parenti ricci, posizioniamo lo "sfondo" che imposta lo sfondo di questo div. Impostiamo l'immagine nell'URL e questo "URL" è qui come valore della proprietà "background" di CSS. Utilizziamo il "confine" e aumentiamo la "larghezza" di questo bordo in questo esempio. Abbiamo impostato la sua "larghezza" su "50px" e questo bordo è in forma "solida". Usiamo la "RGBA" qui di cui abbiamo discusso nel nostro esempio precedente. Impostiamo il valore di alfa come “0.5 "che rappresenta la trasparenza di questo colore del bordo. L '"altezza" di questo "div.avvolgimento "è" 300px "e la" larghezza "è" 500px ", quindi apparirà rettangolare. Il "margine" che abbiamo impostato qui è "50px".
Guarda il seguente output e nota il bordo. Qui, puoi vedere che la parte dell'immagine che è presente dietro il confine è visibile a noi. Significa che questo confine è trasparente. Possiamo creare questo bordo trasparente impostando il valore alfa nel bordo con il colore RGBA.
Conclusione
Questo articolo è presentato qui per aiutarti a cogliere le proprietà CSS che ci consentono di creare il bordo trasparente in CSS. Questo tutorial ha superato a fondo questo argomento. Abbiamo mostrato i tre esempi distinti qui in cui abbiamo progettato il bordo trasparente utilizzando la proprietà del confine. Abbiamo anche usato i valori RGBA in questa proprietà di frontiera, il che ha offerto l'opportunità di impostare i valori alfa per rendere trasparente il nostro bordo. Abbiamo anche definito questo "bordo trasparente" in quanto è il confine da cui abbiamo visto l'oggetto dietro di esso. In questo articolo, abbiamo incluso i risultati di tutti questi codici e li abbiamo spiegati in dettaglio qui. Spero che tu possa creare questo "bordo trasparente" nei tuoi progetti dopo aver seguito attentamente questo articolo.