CSS conturul proprietății este o proprietate confuză. Când aflați pentru prima dată despre el, este greu să înțelegeți cum este chiar diferit de la distanță de proprietatea de la graniță. W3C explică că are următoarele diferențe:
- Contururile nu ocupă spațiu.
- Contururile pot fi non-dreptunghiulare.
Schițele nu ocupă spațiu
Această afirmație, în sine, este confuză. Cum poate un obiect de pe pagina dvs. Web să nu ocupe spațiu pe pagina Web? Dar dacă credeți că pagina dvs. web este ca o ceapă, fiecare element de pe pagină poate fi stratificat deasupra unui alt element. Proprietatea contur nu ocupă spațiu, deoarece este întotdeauna plasată deasupra casetei elementului.
Atunci când un contur este plasat în jurul unui element, acesta nu are niciun efect asupra modului în care acel element este așezat pe pagină. Nu modifică dimensiunea sau poziția elementului. Dacă puneți o schiță pe un element, acesta va ocupa aceeași cantitate de spațiu ca și când nu ați avea o schiță a acelui element. Acest lucru nu este adevărat pentru un
frontieră. O margine pe un element este adăugată la lățimea și înălțimea exterioară a elementului. Deci dacă ai avea un imagine care avea o lățime de 50 de pixeli, cu o margine de 2 pixeli, ar ocupa 54 de pixeli (2 pixeli pentru fiecare margine laterală). Aceeași imagine cu un contur de 2 pixeli ar ocupa doar 50 de pixeli lățime pe pagina dvs., conturul ar fi afișat peste marginea exterioară a imaginii.Contururile pot fi non-dreptunghiulare
Înainte de a începe să vă gândiți „cool, acum pot desena cercuri”, gândiți-vă din nou. Această afirmație are un alt sens decât ai putea crede. Când puneți o margine pe un element, browserul interpretează elementul ca și cum ar fi o cutie dreptunghiulară uriașă. Dacă caseta se împarte pe mai multe linii, browserul lasă marginile deschise, deoarece caseta nu este închisă. Este ca și cum browserul vede marginea cu un ecran lat infinit - suficient de larg pentru ca acea margine să fie un dreptunghi continuu.
În schimb, proprietatea conturului ia în considerare marginile. Dacă un element conturat se întinde pe mai multe linii, conturul se închide la sfârșitul liniei și se redeschide din nou pe linia următoare. Dacă este posibil, conturul va rămâne complet conectat, de asemenea, creând o formă non-dreptunghiulară.
Utilizări ale proprietății de schiță
Una dintre cele mai bune utilizări ale proprietății de schiță este de a evidenția termenii de căutare. Multe site-uri fac acest lucru cu o culoare de fundal, dar puteți utiliza, de asemenea, proprietatea conturului și nu vă faceți griji dacă adăugați spațiu suplimentar pe paginile dvs.
Proprietatea contur-culoare acceptă termenul „inversare”, ceea ce face ca culoarea conturului să fie inversul fundalului curent. Acest lucru vă permite să evidențiați elemente de pe paginile web dinamice fără a fi nevoie să știți ce se folosesc culori.
De asemenea, puteți utiliza proprietatea schiță pentru a elimina linia punctată din jurul linkurilor active. Acest articol din CSS-Tricks arată cum să eliminați conturul punctat.