A CSS a vázlat tulajdonság zavaros tulajdonság. Amikor először megismeri, nehéz megérteni, hogy ez mennyiben különbözik távolról a határ menti ingatlantól. A W3C a következő különbségekkel magyarázza:
- A körvonalak nem foglalnak helyet.
- A körvonalak lehetnek nem téglalap alakúak.
A körvonalak nem foglalnak helyet
Ez az állítás önmagában is zavaró. Hogyan lehet, hogy a weblapon lévő objektumok nem foglalnak helyet a weboldalon? De ha úgy gondolja, hogy weblapja olyan, mint egy hagyma, akkor az oldal minden eleme egy másik elem tetejére kerülhet. A vázlat tulajdonság nem foglal helyet, mert mindig az elem dobozának tetejére kerül.
Ha egy körvonalat egy elem körül helyeznek el, akkor annak nincs hatása az elem elrendezésére az oldalon. Nem változtatja meg az elem méretét vagy helyzetét. Ha egy elemre felvázol egy körvonalat, akkor ugyanannyi helyet foglal el, mintha nem rendelkezne az elem körvonalával. Ez nem igaz a határ. Egy elem szegélye hozzáadódik az elem külső szélességéhez és magasságához. Tehát ha lenne egy
kép ez 50 pixel széles volt, 2 pixeles szegéllyel 54 pixelt (minden oldalhatáronként 2 pixelt). Ugyanaz a 2 pixeles körvonallal rendelkező kép csak 50 pixel szélességet foglal el az oldalon, a körvonal pedig a kép külső széle felett jelenik meg.A körvonalak nem téglalap alakúak lehetnek
Mielőtt elkezdené gondolkodni a "klassz, most már köröket rajzolhatok" gondolkodjon újra. Ennek az állításnak más jelentése van, mint gondolná. Amikor egy elemre szegélyt helyez, a böngésző úgy értelmezi az elemet, mintha egy óriási téglalap alakú mező lenne. Ha a doboz több sorra oszlik, a böngésző csak nyitva hagyja az éleit, mert a doboz nincs bezárva. Olyan, mintha a böngésző egy végtelen széles képernyőn látná a határt - elég széles ahhoz, hogy ez a határ egy folytonos téglalap legyen.
Ezzel szemben a vázlat tulajdonság figyelembe veszi az éleket. Ha egy körvonalazott elem több sort is átível, a körvonal a sor végén bezárul, és a következő soron újra megnyílik. Ha lehetséges, a körvonal is teljesen összekapcsolt marad, nem téglalap alakú alakot hozva létre.
A Vázlat tulajdonság felhasználása
A vázlat tulajdonság egyik legjobb felhasználása a keresési kifejezések kiemelése. Számos webhely ezt háttérszínnel teszi, de használhatja a vázlat tulajdonságot is, és ne aggódjon, ha bármilyen további szóközt ad hozzá az oldalaihoz.
Az outline-color tulajdonság elfogadja az "invert" kifejezést, amely a körvonal színét az aktuális háttér inverzé teszi. Ez lehetővé teszi, hogy kiemelje a dinamikus weboldalak elemeit anélkül, hogy tudnia kellene, mit színeket használnak.
A vázlat tulajdonság segítségével eltávolíthatja a szaggatott vonalat az aktív hivatkozások körül. Ez a cikk a CSS-trükkök megmutatja, hogyan kell távolítsa el a pontozott körvonalat.