Utilizzo di bordi e sfondi in HTML5

C'è proprietà ampiamente utilizzate in HTML e CSS come bordi e sfondi, Dall'incorporazione di CSS3 sono stati migliorati in modo tale da poter avere bordi arrotondati ad esempio, sebbene sia qualcosa che sembra abbastanza semplice, questo non era disponibile in passato, quindi queste funzionalità ora facilitano in modo abbastanza il lavoro di designer e sviluppatori.
Quando applichiamo un bordo dobbiamo prendere in considerazione 3 attributi molto importanti, questi sono:

• larghezza del bordo: inizializza la larghezza del bordo.
• stile del bordo: inizializza lo stile per disegnare il bordo.
• colore del bordo: inizializza il colore del bordo.

Una volta acquisita familiarità con le proprietà, diamo un'occhiata a un semplice esempio di applicazione di un bordo:

 Esempio
Ci sono molti tipi diversi di frutta - ci sono oltre 500 varietà di banane da sole. Quando aggiungiamo gli innumerevoli tipi di mele, arance e altri frutti ben noti, ci troviamo di fronte a migliaia di scelte.

Per definire la larghezza del bordo possiamo lavorare in base a 3 misure, per unità di misura come pixel, cm, em; da percentuali e da preset come, sottile, medio e spesso.
Definiamo il tipo di bordo con lo stile, per questo abbiamo le seguenti opzioni:

• nessuno
• tratteggiato
• punteggiato
• Doppio
• scanalatura
• inserto
• fin dall'inizio
• cresta
• solido

Ora vediamo graficamente cosa significa ciascuno di questi stili:

C'è anche la possibilità di applicare un bordo e uno stile a ciascuno dei lati dell'elemento, per questo useremo le seguenti istruzioni:
[colore = # d3d3d3] bordo-alto-larghezza
stile border-top
border-top-color [/ color]
bordo-basso-larghezza
stile bordo-basso
bordo-fondo-colore
[colore = # d3d3d3] bordo-sinistro-larghezza
stile bordo-sinistro
bordo-sinistro-colore [/ colore]
[colore = # d3d3d3] bordo-larghezza-destra
stile bordo-destro
bordo-destro-colore [/ colore]
In cui si superiore si riferisce alla parte superiore, metter il fondo a a quello inferiore, sinistra a sinistra e Giusto sulla destra.
Con questo possiamo persino ottenere combinazioni di tipi di bordi nello stesso elemento.
Vediamo un esempio di quest'ultimo:

 Esempio
Ci sono molti tipi diversi di frutta - ci sono oltre 500 varietà di banane da sole. Quando aggiungiamo gli innumerevoli tipi di mele, arance e altri frutti ben noti, ci troviamo di fronte a migliaia di scelte.

Il codice ci dà i seguenti risultati:

Per creare i bordi arrotondati possiamo usare la proprietà raggio che ci permette di indicare il raggio di curvatura del bordo.
Vediamo come implementare il codice:

 Esempio
Ci sono molti tipi diversi di frutta - ci sono oltre 500 varietà di banane da sole. Quando aggiungiamo gli innumerevoli tipi di mele, arance e altri frutti ben noti, ci troviamo di fronte a migliaia di scelte.

Ne risulta la seguente schermata:

Con questo concludiamo questo tutorial su questi elementi, ora possiamo incorporare miglioramenti sul nostro CSS senza troppi sforzi e con strumenti tecnologici all'avanguardia.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo