The CSS lastnost orisa je zmedena lastnost. Ko prvič izveš za to, je težko razumeti, kako se sploh razlikuje od mejne lastnosti. W3C pojasnjuje, da ima naslednje razlike:
- Obrisi ne zajemajo prostora.
- Obrisi so lahko ne pravokotni.
Obrisi Ne zavzemite prostora
Ta izjava je že sama po sebi zmedena. Kako lahko predmet na vaši spletni strani ne zavzame prostora na spletni strani? Če pa za svojo spletno stran mislite, da je kot čebula, je lahko vsak element na strani razporejen na drug element. Lastnost orisa ne zavzame prostora, ker je vedno postavljena na vrh polja elementa.
Ko je okoli elementa postavljen oris, to nima nobenega vpliva na to, kako je ta element postavljen na strani. Ne spremeni velikosti ali položaja elementa. Če elementu postavite oris, bo zavzel enako veliko prostora, kot če ne bi imeli orisa tega elementa. To ne velja za a meja. Meja na elementu se doda zunanji širini in višini elementa. Torej, če bi imeli slike ki je bil širok 50 slikovnih pik, z obrobo z dvema slikovnima pikama bi trajal 54 slikovnih pik (2 slikovni piki za vsako stransko obrobo). Ista slika z obrisom 2 slikovnih pik bi na vaši strani zavzela le 50 slikovnih pik, obris bi se prikazal čez zunanji rob slike.
Obrisi so lahko ne pravokotni
Preden začnete razmišljati "kul, zdaj lahko rišem kroge," premislite še enkrat. Ta izjava ima drugačen pomen, kot si morda mislite. Ko postavite obrobo na element, brskalnik element razlaga kot en velikanski pravokotni okvir. Če se polje razdeli na več vrstic, brskalnik pusti robove odprte, ker polje ni zaprto. Kot da brskalnik vidi mejo z neskončno širokim zaslonom - dovolj širokim, da je lahko ta rob en neprekinjen pravokotnik.
Nasprotno pa lastnost orisa upošteva robove. Če se orisani element razteza na več vrstic, se obris na koncu vrstice zapre in znova odpre v naslednji vrstici. Če je mogoče, bo tudi obris ostal popolnoma povezan in ustvaril nepravokotno obliko.
Uporabe lastnosti Outline
Ena najboljših načinov uporabe lastnosti orisa je poudarjanje iskalnih izrazov. Številna spletna mesta to počnejo z barvo ozadja, lahko pa uporabite tudi lastnost orisa in ne skrbite, da ne dodate dodatnih presledkov na svoje strani.
Lastnost outline-color sprejema izraz "invert", zaradi česar je barva orisa inverzna trenutnemu ozadju. To vam omogoča, da poudarite elemente na dinamičnih spletnih straneh, ne da bi morali vedeti, kaj barve.
Lastnost orisa lahko uporabite tudi za odstranjevanje pikčaste črte okoli aktivnih povezav. Ta članek iz CSS-triki kaže, kako odstranite pikčast obris.