Obrysy CSS jsou víc než hranice
Vlastnost osnovy CSS je matoucí vlastností. Když se o tom nejprve naučíte, je těžké pochopit, jak je to dokonce vzdáleně odlišné od vlastnosti hranice. W3C vysvětluje, že má následující rozdíly:
- Obrysy nevyužívají prostor.
- Obrysy mohou být obdélníkové.
Obrysy nezachycují prostor
Toto prohlášení samo o sobě je matoucí. Jak může objekt na vaší webové stránce neztratit prostor na webové stránce? Ale pokud si myslíte, že vaše webové stránky jsou jako cibule, každá položka na stránce může být navržena nad jinou položku. Obrysová vlastnost nevyčerpá prostor, protože je vždy umístěna na vrcholu pole prvku.
Když je kolem prvku umístěn obrys, nemá vliv na to, jak je tento prvek rozložen na stránce. Nemění velikost nebo polohu prvku. Pokud položíte obrys na prvek, bude to trvat stejný prostor jako kdybyste neměli obrys tohoto elementu. To neplatí pro okraj. Na vnější šířku a výšku prvku se přidává okraj na prvek. Takže pokud byste měli obraz o šířce 50 pixelů, s hranicí 2 pixelů, bude to trvat 54 pixelů (2 pixely pro každou boční hranici). Stejný snímek s 2-pixelovým obrysem by na vaší stránce měl pouze 50 pixelů, obrys by se zobrazoval přes vnější okraj obrázku.
Obrysy mohou být nepravidelné
Než začnete přemýšlet "cool, teď můžu čerpat kruhy!" Přemýšlejte znovu. Toto prohlášení má jiný význam, než si myslíte. Když položíte hranici na prvek, prohlížeč interpretuje prvek tak, jako by to byl obrovský pravoúhlý rámeček. Pokud je rámeček rozdělen na několik řádků, prohlížeč právě opouští okraje otevřené, protože krabice není zavřená. Je to jako kdyby prohlížeč viděl okraj s nekonečně širokou obrazovkou - dostatečně širokou pro to, aby hranice byla jeden kontinuální obdélník.
Naproti tomu vlastnost obrysu zohledňuje hrany. Pokud se načrtnutý element rozkládá na několik řádků, obrys se uzavře na konci řádku a znovu se znovu otevře na dalším řádku. Pokud je to možné, obrys zůstane plně připojen a vytvoří tak tvar obdélníkového tvaru.
Použití vlastnosti osnovy
Jedním z nejlepších způsobů použití vlastností osnovy je zvýraznění vyhledávacích dotazů. Mnoho stránek to dělá s barvou pozadí, ale můžete také použít vlastnosti osnovy a nemusíte se obávat, že přidáte na své stránky další mezery.
Vlastnost barvy osnovy přijímá výraz "invert", který zbarvuje obrys obráceně aktuálního pozadí. To umožňuje zvýraznit prvky na dynamických webových stránkách, aniž byste museli vědět, jaké barvy jsou používány .
Vlastnost osnovy můžete také použít k odstranění tečkované čáry kolem aktivních odkazů. Tento článek z CSS-triků ukazuje, jak odstranit tečkovanou obrys.