Obrysy CSS nie sú len hranice
Vlastnosť osnovy CSS je mätúcou vlastnosťou. Keď sa o tom na prvýkrát dozviete, je ťažké pochopiť, ako sa dokonca vzdialene líši od vlastností hraníc. W3C vysvetľuje, že má nasledovné rozdiely:
- Obrysy nevyužívajú priestor.
- Obrysy môžu byť obdĺžnikové.
Obrysy nezachytia priestor
Toto vyhlásenie samo osebe je mätúce. Ako môže objekt na vašej webovej stránke nezískať priestor na webovej stránke? Ale ak si myslíte, že vaša webová stránka je ako cibuľka, každá položka na stránke môže byť navrstvená nad druhou položkou. Obrysová vlastnosť nevyužíva priestor, pretože je vždy umiestnená na vrchole skrinky prvku.
Keď je obrys umiestnený okolo prvku, nemá žiadny vplyv na to, ako sa tento prvok nachádza na stránke. Nemení veľkosť alebo pozíciu prvku. Ak položíte prvok na obrys, bude to trvať rovnako, ako keby ste nemali obrys tohto prvku. To nie je pravda o hranici. Na vonkajšiu šírku a výšku prvku sa pridá hranica na prvku. Takže ak by ste mali obrázok so šírkou 50 pixelov a 2-pixelovou hranicou, zaberali by to 54 pixelov (2 pixely pre každú bočnú hranicu). Rovnaký obrázok s 2-pixelovým obrysom by na vašej stránke mal mať iba 50 pixelov, obrys by sa zobrazoval nad vonkajším okrajom obrázku.
Obrysy nemusia byť obdĺžnikové
Než začnete myslieť "cool, teraz môžem nakresliť kruhy!" Zamysli sa znova. Toto tvrdenie má iný význam, než si myslíte. Keď položíte hranicu na prvok, prehliadač interpretuje prvok tak, akoby bol obrovský obdĺžnikový box. Ak sa box rozdelí na niekoľko riadkov, prehliadač jednoducho nechá okraje otvorené, pretože krabica nie je zatvorená. Je to ako keby prehliadač vidí hranicu s nekonečne širokou obrazovkou - dostatočne širokou na to, aby bol hranicou jeden kontinuálny obdĺžnik.
Na rozdiel od toho, vlastnosť obrysu zohľadňuje okraje. Ak sa načrtnutý prvok prekrýva niekoľko riadkov, obrys sa uzavrie na konci riadka a opäť sa otvorí na ďalšom riadku. Ak je to možné, obrys zostane plne pripojený, čím vytvorí tvar obdĺžnikového tvaru.
Použitie vlastností obrysu
Jedným z najlepších spôsobov používania vlastností osnovy je zvýraznenie hľadaných výrazov. Mnoho stránok to robí s farbou pozadia, ale môžete použiť aj vlastnosť osnovy a nemusíte sa obávať pridaním ďalších medzery na vaše stránky.
Vlastnosť farby obrysu akceptuje výraz "invert", ktorý robí obrys farieb inverzným aktuálnym pozadím. To umožňuje zvýrazniť prvky na dynamických webových stránkach bez toho, aby ste museli vedieť, aké farby sa používajú .
Môžete tiež použiť vlastnosti osnovy na odstránenie prerušovanej čiary okolo aktívnych odkazov. Tento článok zo služby CSS-Triky ukazuje, ako odstrániť bodkovaný obrys.