✅ Utilizarea chenarelor și fundalurilor în HTML5

Cuprins

Există proprietăți utilizate pe scară largă în HTML și CSS, cum ar fi marginile și fundalurile, De la încorporarea CSS3, acestea au fost îmbunătățite în așa fel încât să putem avea margini rotunjite, de exemplu, deși este ceva care pare destul de simplu, acest lucru nu a fost disponibil în trecut, astfel încât aceste funcționalități acum facilitează într-un mod destul de extins munca atât a proiectanților, cât și a dezvoltatorilor.
Atunci când aplicăm o margine, trebuie să ținem cont de 3 atribute foarte importante, acestea fiind:

lățimea graniței: inițializează lățimea chenarului.
în stilul chenarului: inițializează stilul pentru desenarea chenarului.
culoarea chenarului: inițializează culoarea chenarului.

Odată ce sunteți familiarizați cu proprietățile, să analizăm un exemplu simplu de aplicare a unei margini:

Exemplu

Există o mulțime de feluri diferite de fructe - există peste 500 de soiuri de banane numai. Până când adăugăm nenumăratele tipuri de mere, portocale și alte fructe cunoscute, ne confruntăm cu mii de alegeri.

Pentru a defini lățimea chenarului putem lucra pe baza a 3 măsurători, pe unități de măsură precum pixeli, cm, em; prin procente și prin presetări precum, subțire, medie și groasă.
Definim tipul de chenar cu stilul, pentru aceasta avem următoarele opțiuni:

nici unul
zguduit
punctat
dubla
canelură
medalion
început
creastă
solid

Acum să vedem grafic ce înseamnă fiecare dintre aceste stiluri:

Există, de asemenea, posibilitatea de a aplica o margine și un stil fiecărei părți ale elementului, pentru aceasta vom folosi următoarele instrucțiuni:
[color = # d3d3d3] border-top-width
stil de frontieră
border-top-color [/ color]
margine-fund-lățime
stil de margine-fund
margine-fund-culoare
[color = # d3d3d3] border-left-width
stil-frontieră-stânga
border-left-color [/ color]
[color = # d3d3d3] border-right-width
stil-frontieră-dreapta
border-right-color [/ color]
Unde top se referă la partea de sus, fund la cea inferioară, stânga spre stânga și dreapta pe dreapta.
Cu aceasta putem realiza chiar combinații de tipuri de muchii în același element.
Să vedem un exemplu al acestuia din urmă:

Exemplu

Codul ne oferă următoarele rezultate:

Pentru a crea muchiile rotunjite putem folosi proprietatea rază care ne permite să indicăm raza de curbură a muchiei.
Să vedem cum să implementăm codul:

Exemplu

Acest lucru duce la următorul ecran:

Cu aceasta încheiem acest tutorial despre aceste elemente, acum putem încorpora îmbunătățiri pe CSS-ul nostru fără eforturi mari și cu instrumente tehnologice de ultimă oră.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv