Proprietatea HTML de frontieră vă permite să definiți stilul, lățimea și culoarea marginii elementului. Limitele elementelor pot îndeplini atât funcții decorative cât și practice.
Stilul de frontieră
Proprietatea în stil de frontieră vă permite să definiți tipul (stilul) de graniță.
Această proprietate preia diferite valori:
- punctat - de frontieră până la punct;
- zgâlțâit - frontiera în accident vascular cerebral;
- graniță solidă - solidă;
- frontieră dublă - dublă;
- groove este o limită tridimensională. Efectul depinde de valoarea proprietății de culoare a frontierei;
- creasta este o graniță tridimensională. Efectul depinde de valoarea proprietății de culoare a frontierei;
- inset este o graniță tridimensională încastrată. Efectul depinde de valoarea proprietății de culoare a frontierei;
- începutul este o limită convexă tridimensională. Efectul depinde de valoarea proprietății de culoare a frontierei;
- niciunul - deconectare;
- ascunse - frontiere ascunse.
Proprietatea stilului de margine HTML poate avea una sau patru valori (pentru partea de sus, dreapta, partea de jos și cea stângă).
Important! Niciuna dintre proprietățile HTML de mai sus a frontierei nu va avea efect decât dacă este setată valoarea stilului de margine!
Lățimea frontală
Proprietatea lățime de margine specifică lățimea marginii pe oricare dintre cele patru laturi ale elementului.
Lățimea poate fi specificată atât în unități de măsură (px, pt, cm, em, etc.), și utilizând cuvintele cheie: subțire. mediu sau gros.
Proprietatea latime a graniței poate avea una sau patru valori (pentru partea superioară, dreapta, partea de jos și cea stângă).
Border Color
Proprietatea de culoare a hârtiei HTML este utilizată pentru a specifica culoarea de margine pentru una dintre cele patru laturi ale elementului.
Culoarea poate fi specificată în mai multe moduri:
- Numele - numele culorii (de ex. Roșu);
- Hex - specifică valoarea hexă a culorii (de exemplu, # FF0000);
- RGB - specifică valoarea RGB a culorii (de exemplu, rgb (255,0,0));
- transparent (clar).
Proprietatea pentru culoarea frontală poate avea una sau patru valori (pentru partea superioară, dreaptă, partea de jos și cea stângă).
Dacă nu setați proprietatea pentru culoarea frontală. atunci granițele vor moșteni culoarea elementului.
Styling borders separat
În CSS, există proprietăți HTML pentru a defini stilul fiecărei părți a elementului (de sus, de la dreapta, de jos și de la stânga).
Un rezultat similar poate fi obținut prin următoarea metodă:
Cum funcționează
Dacă proprietatea stilului de frontieră HTML are patru valori:
- stilul frontal: punctat solid dublu spart;
- limita superioară este setată la punctată;
- limita dreaptă este solidă;
- limita inferioară este dublă;
- frontiera din stânga este întreruptă.
Dacă stilul de frontieră are trei valori:
- stil de frontieră: dublu solid punctat;
- limita superioară este setată la punctată;
- limitele dreptului și stângii sunt solide;
- limita inferioară este dublă.
Dacă stilul de frontieră are două valori:
- stilul frontal: solid punctat;
- limitele superioare și inferioare au valoarea punctată;
- limitele dreptului și stângii sunt solide.
Dacă stilul de chenar HTML are o valoare:
- stilul frontal: punctat;
- atunci toate cele patru margini vor avea valoarea punctată.
În exemplele de mai sus, am folosit proprietatea în stil de frontieră. Dar rețineți că aceleași reguli se aplică lățimii la frontieră. și culoarea de frontieră.
Proprietatea de frontieră scurtă
După cum puteți vedea din exemple, atunci când modelați limitele elementelor trebuie să aplicați o mulțime de proprietăți diferite. Pentru a scurta codul, puteți utiliza marginea specială a proprietății:
Aceeași proprietate poate fi utilizată pentru a modela granițele pe anumite laturi ale unui element.
Stânga frontieră
Limita inferioară
Rotunjite
Proprietatea razei de graniță HTML vă permite să desenați un element cu margini cu colțuri rotunjite.
Notă: proprietatea de rază de frontieră nu este acceptată în IE8 și în versiunile anterioare ale acestui browser.
Ca o expresie pentru a stiliza imediat toate limitele superioare
Stylizați marginea inferioară a elementelor
Setați lățimea marginii din stânga
Specificați culoarea celor patru margini
Specificați culoarea numai a marginii drepte a elementului
Traducerea articolului "CSS Borders" a fost pregătită de echipa prietenoasă a proiectului Saitostroenie de la A la Z.