Bordi a gradiente - CSS

L'uso di colori intuitivi nel web design può aiutare a attirare l'attenzione dell'utente. Metodi di colore diversi possono essere utilizzati nelle applicazioni Web. I colori del gradiente sono significativi e attraenti perché combinano diversi colori per produrre più toni di colore. Non ci sono proprietà CSS particolari per aggiungere bordi a gradiente attorno all'elemento. Tuttavia, alcune altre proprietà ci aiutano in questo contesto.

Questo post descriverà come applicare i bordi del gradiente in CSS.

Come applicare i bordi del gradiente in CSS?

Abbiamo elencato i metodi per applicare i bordi del gradiente attorno all'elemento HTML:

• Metodo 1: Aggiungi bordo gradiente attorno all'elemento usando CSS “Immagine di confine" Proprietà
• Metodo 2: Aggiungi bordo gradiente attorno all'elemento usando CSS “imbottitura" Proprietà

Prima di saltare nei metodi sopra indicati, creiamo prima una pagina HTML.

Prerequisito

Segui le istruzioni per creare una pagina HTML:

• Aggiungere un ""Elemento e assegnarlo una classe"principale".
• All'interno di questo elemento, aggiungi un altro elemento "" per posizionare un'immagine. Imposta la sua classe come "Immagine". Questo elemento div contiene il ""Tag con gli attributi" src "," alt "e" larghezza ".
• IL "src"L'attributo specifica l'URL dell'immagine.
• IL "Al"L'attributo definisce un testo che verrà visualizzato sullo schermo se l'immagine non può caricare.
• IL "larghezza"Determina la larghezza dell'immagine.

Ecco il codice HTML:

Applichiamo un po 'di stile CSS sulla pagina HTML.

Elemento stile ""

L'elemento Div con classe "principale"È disegnato con le seguenti proprietà CSS:

.principale
larghezza: 350px;
Altezza: 230px;
display: flex;
giustificare contento: centro;
ALIGE-ITMS: CENTRO;
Margine: auto;

La descrizione del codice sopra menzionato è elencata di seguito:

• "larghezza"Regola la larghezza dell'elemento.
• "altezza"Determina l'altezza dell'elemento.
• "Schermo"La proprietà definisce il comportamento di visualizzazione dell'elemento. Il valore "flettere"Rende flessibile il layout dell'elemento.
• "giustificare il contenuto"La proprietà allinea gli oggetti flessibili in orizzontale.
• "allineare"Allinea gli articoli flessibili in verticale.
• "margine"Aggiunge spazio attorno all'elemento.

Si può osservare che l'immagine viene regolata correttamente nella pagina Web:

Metodo 1: aggiungi il bordo del gradiente attorno all'elemento usando la proprietà "Immagina di confine" CSS

Ora, nell'esempio in corso, il CSS "Immagine di confine"La proprietà viene utilizzata per generare gradienti. In CSS, aggiungi le seguenti proprietà al Div con classe ".principale":

bordo: 5px solido trasparente;
Immagina di confine: gradiente lineare (40deg, RGB (19, 29, 163), RGB (138, 211, 253)) 1;

Di seguito è riportata la spiegazione delle proprietà sopra menzionate:

• "confine"È una proprietà stensa che applica un bordo attorno all'elemento specificando la larghezza, lo stile e il colore del bordo.
• "Immagine di confine"Viene assegnato il valore"Lineare-gradient ()"Funzione, che crea un'immagine con più colori che progrediscono in una direzione particolare. Questa funzione contiene alcuni parametri. Il primo valore rappresenta il "angolo"A cui verrà inclinato il gradiente, quindi l'inizio e la fine del gradiente sono specificati dai due"colore" valori. Alla fine, l'opacità è definita.

L'immagine seguente mostra che il bordo gradiente è stato applicato con successo attorno all'immagine:

Metodo 2: aggiungi il bordo del gradiente attorno all'elemento usando la proprietà "imbottitura" CSS

Per aggiungere l'elemento gradiente, le due proprietà CSS che sono più importanti sono elencate di seguito:

• IL "principale"Div è disegnato con il"sfondo"Proprietà con il valore assegnato come"Lineare-gradient ()" funzione.
• Il contenitore di div che ha un "Immagine"Classe è assegnato il"imbottitura"Proprietà per produrre spazio attorno al""Elemento. Ciò renderà più facile vedere lo sfondo del gradiente di "principale"Classe di div come bordo dell'immagine.

Implettiamo questi due punti.

Classe "principale" di stile

.principale
larghezza: 380px;
Sfondo: gradiente lineare (a destra, RGB (17, 17, 17), RGB (184, 178, 178), RGBA (141, 19, 86, 0.857));
Margine: auto;
display: flex;
giustificare contento: centro;
ALIGE-ITMS: CENTRO;

IL ".principale"Viene utilizzato per accedere all'elemento Div con classe"principale". Le seguenti proprietà sono applicate ad esso:

• "sfondo"Proprietà viene assegnata una funzione" lineare-gradiente () "come valore. Ha diversi parametri. Il primo valore rappresenta la direzione del gradiente. Gli altri tre parametri rappresentano i colori del gradiente.

Stile "Immagine" Div

.Immagine
imbottitura: 10px;

Il CSS "imbottitura"La proprietà viene applicata al contenitore Div con classe"Immagine". Questa proprietà produrrà spazio attorno al suo contenuto. Nel nostro caso, abbiamo incorporato l'immagine.

Il bordo del gradiente attorno all'immagine è mostrato nell'output di seguito:

Abbiamo imparato i metodi per applicare i bordi del gradiente attorno agli elementi usando CSS.

Conclusione

In CSS, il “Immagine di confine"Proprietà con il valore assegnato come"Lineare-gradient ()"La funzione viene utilizzata per aggiungere bordi a gradiente attorno all'elemento. Il CSS "imbottitura"La proprietà può anche essere utile per rappresentare lo sfondo del gradiente come bordo del contenuto. In questo post, abbiamo dimostrato come applicare i bordi del gradiente attorno agli elementi usando CSS.