The CSS svojstvo obrisa je zbunjujuće svojstvo. Kad prvi put saznate za to, teško je shvatiti kako se on uopće razlikuje od graničnog svojstva. W3C to objašnjava kao sljedeće razlike:
- Obrisi ne zauzimaju prostor.
- Obrisi mogu biti nepravokutni.
Obrisi ne zauzimaju prostor
Ova izjava sama po sebi zbunjuje. Kako objekt na vašoj web stranici ne zauzima prostor na web stranici? Ali ako mislite da je vaša web stranica poput luka, svaka stavka na stranici može biti naslonjena na drugu stavku. Svojstvo obris ne zauzima prostor jer se uvijek postavlja na vrh okvira elementa.
Kada se oko elementa stavi obris, to nema nikakvog utjecaja na to kako je taj element postavljen na stranici. To ne mijenja veličinu ili položaj elementa. Ako stavite obris na element, zauzet će jednaku količinu prostora kao da nemate obris tog elementa. To ne vrijedi za a granica. Obrub na elementu dodaje se vanjskoj širini i visini elementa. Pa ako ste imali slika širine 50 piksela, s okvirom od 2 piksela, trebalo bi 54 piksela (2 piksela za svaku bočnu obrubu). Ista slika s obrisom od 2 piksela zauzimala bi samo 50 piksela širine na vašoj stranici, obris bi se prikazivao preko vanjskog ruba slike.
Obrisi mogu biti nepravokutni
Prije nego što počnete razmišljati "cool, sad mogu crtati krugove", razmislite ponovo. Ova izjava ima drugačije značenje nego što mislite. Kad stavite obrub na element, preglednik ga protumači kao da je riječ o jednom ogromnom pravokutnom okviru. Ako se okvir podijeli na nekoliko redaka, preglednik samo ostavlja rubove otvorenima jer okvir nije zatvoren. Kao da preglednik vidi granicu s beskrajno širokim zaslonom - dovoljno širokim da ta granica bude jedan kontinuirani pravokutnik.
Suprotno tome, svojstvo obris uzima u obzir rubove. Ako se ocrtani element proteže kroz nekoliko redaka, obris se zatvara na kraju retka i ponovno otvara na sljedećem retku. Ako je moguće, i obris će ostati u potpunosti povezan stvarajući nepravokutni oblik.
Upotrebe svojstva Outline
Jedna od najboljih upotreba svojstva kontura je isticanje pojmova za pretraživanje. Mnoge web stranice to rade s bojom pozadine, ali također možete koristiti svojstvo obrisa i ne brinuti se o dodavanju dodatnih razmaka na svoje stranice.
Svojstvo outline-color prihvaća pojam "invert" što boju obrisa čini obrnutom od trenutne pozadine. To vam omogućuje da istaknete elemente na dinamičkim web stranicama bez potrebe da znate što koriste se boje.
Svojstvo obris možete koristiti i za uklanjanje isprekidane crte oko aktivnih veza. Ovaj članak iz CSS-trikovi pokazuje kako uklonite točkasti obris.