A CSS körvonalai több mint egy határ
A CSS körvonal tulajdonsága zavaró tulajdonság. Amikor először megtudod, nehéz megérteni, hogy ez távolról is különbözik a határtól. A W3C a következő különbségeket magyarázza:
- A körvonalak nem foglalnak helyet.
- A körvonalak lehetnek nem négyszögletesek.
A körvonalak ne vegyenek fel helyet
Ez az állítás önmagában is zavaró. Hogyan férhet hozzá a weboldal valamely objektuma a weboldalon? De ha úgy gondolja, hogy a weboldal olyan, mint egy hagyma, az egyes elemek az oldalon lehet rétegezve tetején egy másik elemet. A vázlat tulajdonsága nem foglal helyet, mert mindig az elem dobozának tetejére kerül.
Ha egy körvonal egy elem körül helyezkedik el, akkor nincs hatása arra, hogy az adott elem hogyan van elhelyezve az oldalon. Nem változtatja meg az elem méretét vagy pozícióját. Ha egy elemre vázlatot rajzol, ugyanannyi helyet foglal el, mintha nincs rajta az elem. Ez nem igaz a határon. Egy elem határa hozzá van adva az elem külső szélességéhez és magasságához. Tehát, ha volt egy 50 képpontos kép , két képpontos szegély esetén 54 képpont (2 képpont mindegyik oldalhatárhoz). Ugyanaz a kép, amelynek két képpontos vázlata csak 50 képpont szélességet eredményez az oldalán, a vázlat megjelenik a kép külső szélén.
A körvonalak lehetnek nem négyszögletesek
Mielőtt elkezdi gondolkodni "hűvös, most rajzolhatok köröket!" Gondold újra! Ez a kijelentésnek más jelentése van, mint gondolná. Amikor egy elemet helyez el egy elemre, a böngésző úgy értelmezi az elemet, mintha egy hatalmas négyszögletes doboz lenne. Ha a doboz több sorra oszlik, akkor a böngésző csak akkor hagyja el a széleket, mert a doboz nincs bezárva. Úgy tűnik, mintha a böngésző egy végtelen széles képernyővel látná a határt, amely elég széles ahhoz, hogy a határ egy folyamatos téglalap legyen.
Ezzel szemben a vázlatos tulajdonság figyelembe veszi a széleket. Ha egy vázolt elem több sorba kapcsol, a körvonal a vonal végén záródik, és újra megjelenik a következő sorban. Ha lehetséges, akkor a körvonal is teljesen összekapcsolódik, így nem téglalap alakú.
A körvonal tulajdonságainak használata
A vázlatos tulajdonság egyik legjobb felhasználási módja a keresési kifejezések kiemelése. Sok webhely ezt háttérszínnel látja el, de használhatja a vázlat tulajdonságát is, és ne aggódjon, ha további oldalakat szeretne hozzáadni.
A vázlat-színes tulajdonság elfogadja az "inverz" kifejezést, amely a vázlatszínt az aktuális háttér inverzeivé teszi. Ez lehetővé teszi a dinamikus weboldalak elemeinek kiemelését, anélkül, hogy tudni kellene, milyen színeket használnak .
A körvonal tulajdonságaival is eltávolíthatja a pontozott vonalat az aktív linkek körül. Ez a CSS-Tricks cikk bemutatja, hogyan távolíthatja el a pontozott vázlatot.