CSS útlínur eru meira en bara landamæri
The CSS útlínur eign er ruglingslegt eign. Þegar þú lærir fyrst um það er erfitt að skilja hvernig það er jafnvel lítillega frábrugðin landamærum. The W3C útskýrir það sem að hafa eftirfarandi munur:
- Útlínur taka ekki upp pláss.
- Útlínur geta verið ekki rétthyrndar.
Útlínur taka ekki upp pláss
Þessi yfirlýsing, í sjálfu sér, er ruglingslegt. Hvernig getur hlutur á vefsíðunni þinni ekki tekið upp pláss á vefsíðunni? En ef þú heldur að vefsíðan þín sé eins og laukur, getur hvert atriði á síðunni verið lagskipt ofan á annað atriði. Yfirlit eignarinnar tekur ekki upp pláss vegna þess að það er alltaf sett ofan á reitinn í frumefni.
Þegar útlínur eru settar í kringum frumefni hefur það engin áhrif á hvernig þessi þáttur er settur út á síðunni. Það breytir ekki stærð og stöðu hlutans. Ef þú setur útlínur á frumefni mun það taka upp sama pláss og þú hefur ekki yfirlit yfir þá þætti. Þetta á ekki við um landamæri. Landamæri á frumefni er bætt við utanaðkomandi breidd og hæð frumefnisins. Svo ef þú átt mynd sem var 50 pixlar á breidd, með 2 punkta landamæri, myndi það taka upp 54 punkta (2 punktar fyrir hverja hliðarlínu). Sama mynd með 2 pixla útlínum myndi taka aðeins 50 punkta breidd á síðuna þína, útlínan myndi birtast utan um brún myndarinnar.
Útlínur geta verið óraunverulegar
Áður en þú byrjar að hugsa "flott, nú get ég teiknað hringi!" Hugsaðu aftur. Þessi yfirlýsing hefur aðra merkingu en þú gætir hugsað. Þegar þú setur landamæri á frumefni, túlkar vafrinn þáttinn eins og það væri einn risastór rétthyrndur kassi. Ef kassinn verður skipt yfir nokkrum línum, þá fer vafrinn bara að brúnirnar opna vegna þess að kassinn er ekki lokaður. Það er eins og vafrinn sé að sjá landamærin með óendanlega breiður skjár - nógu breiður fyrir að landamærin sé ein samfelld rétthyrningur.
Hins vegar tekur útlínueiginleikinn tillit til brúna. Ef skýringarmynd nær yfir nokkrar línur, lokar útlínan í lok línunnar og enduropnar aftur á næstu línu. Ef mögulegt er verður útlínan einnig að fullu tengd og búið til ekki rétthyrnd form.
Notkun útlits Property
Eitt af því sem best er að nota útlínueignina er að auðkenna leitarskilyrði. Margir síður gera þetta með bakgrunnslit, en þú getur líka notað yfirlits eignina og ekki hafa áhyggjur af því að bæta við auka bili á síðum þínum.
Útlitshæðin samþykkir hugtakið "invert" sem gerir útlínur litið andhverfa núverandi bakgrunns. Þetta gerir þér kleift að auðkenna þætti á dynamic vefsíðum án þess að þurfa að vita hvaða litir eru notaðar .
Þú getur einnig notað útlínueiginleikann til að fjarlægja dotted lína í kringum virk tengla. Þessi grein frá CSS-Bragðarefur sýnir hvernig á að fjarlægja dotted outline.