The CSS obrysový majetok je neprehľadný. Keď sa o tom prvýkrát dozviete, je ťažké pochopiť, ako sa čo i len trochu odlišuje od pohraničného majetku. W3C to vysvetľuje nasledujúcimi rozdielmi:
- Obrysy nezaberajú miesto.
- Obrysy môžu byť nie obdĺžnikové.
Obrysy nezaberajú miesto
Toto vyhlásenie je samo o sebe mätúce. Ako nemôže objekt na vašej webovej stránke zaberať miesto na tejto webovej stránke? Ak si však myslíte, že vaša webová stránka je ako cibuľa, každá položka na stránke môže byť navrstvená na inú položku. Vlastnosť obrys nezaberá miesto, pretože je vždy umiestnená na vrchu rámčeka prvku.
Ak je okolo prvku umiestnený obrys, nemá to žiadny vplyv na jeho rozloženie na stránke. Nezmení to veľkosť ani polohu prvku. Ak vložíte obrys na prvok, zaberie to rovnaké miesto ako keby ste obrys daného prvku nemali. To neplatí pre a hranica. Okraj na prvku sa pridá k vonkajšej šírke a výške prvku. Takže ak ste mali obrázok ktorá bola široká 50 pixelov a mala by 2-pixelové ohraničenie, zaberala by 54 pixelov (2 pixely pre každé bočné ohraničenie). Ten istý obrázok s obrysom 2 pixelov by na vašej stránke zabral iba šírku 50 pixelov, obrys by sa zobrazil cez vonkajší okraj obrázka.
Obrysy môžu byť neobdĺžnikové
Skôr ako si začnete myslieť, že „v pohode, teraz dokážem kresliť kruhy,“ premýšľajte znova. Toto tvrdenie má iný význam, ako si myslíte. Keď vložíte ohraničenie prvku, prehľadávač interpretuje prvok, akoby to bolo jedno obrovské obdĺžnikové pole. Ak sa krabica rozdelí na niekoľko riadkov, prehliadač ponechá okraje otvorené, pretože krabička nie je zatvorená. Je to, akoby prehliadač videl hranicu s nekonečne širokouhlou obrazovkou - dostatočne širokou, aby táto hranica bola jedným súvislým obdĺžnikom.
Naproti tomu vlastnosť obrys zohľadňuje hrany. Ak obrysový prvok pokrýva niekoľko riadkov, obrys sa uzavrie na konci riadku a znova sa otvorí v ďalšom riadku. Ak je to možné, obrys tiež zostane úplne spojený a vytvorí sa obdĺžnikový tvar.
Použitie vlastnosti osnovy
Jedným z najlepších použití vlastnosti obrys je zvýraznenie hľadaných výrazov. Mnoho webov to robí s farbou pozadia, ale môžete tiež použiť vlastnosť obrys a nemusíte sa starať o to, že na svoje stránky pridáte ďalšie medzery.
Vlastnosť outline-color prijíma výraz „invertovať“, čo robí farbu obrysu inverznou voči aktuálnemu pozadiu. Toto vám umožní zvýrazniť prvky na dynamických webových stránkach bez toho, aby ste museli vedieť čo farby sa používajú.
Vlastnosť obrys môžete tiež použiť na odstránenie prerušovanej čiary okolo aktívnych odkazov. Tento článok od Triky CSS ukazuje ako odstráňte bodkovaný obrys.