CSS kontūrinis turtas yra painus turtas. Kai pirmą kartą sužinosite apie tai, sunku suprasti, kuo jis net iš tolo skiriasi nuo pasienio turto. W3C paaiškina, kad turi šiuos skirtumus:
- Kontūrai neužima vietos.
- Kontūrai gali būti ne stačiakampiai.
Kontūrai neužima vietos
Šis teiginys pats savaime yra painus. Kaip jūsų tinklalapio objektas gali neužimti vietos tinklalapyje? Bet jei manote, kad jūsų tinklalapis yra kaip svogūnas, kiekvienas puslapio elementas gali būti sluoksniuotas ant kito elemento. Kontūro ypatybė neužima vietos, nes ji visada dedama ant elemento langelio viršaus.
Kai aplink elementą dedami kontūrai, tai neturi jokios įtakos to elemento išdėstymui puslapyje. Tai nekeičia elemento dydžio ar padėties. Jei ant elemento uždėsite kontūrą, jis užims tiek pat vietos, tarsi neturėtumėte to elemento kontūro. Tai netiesa a sienos. Prie išorinio elemento pločio ir aukščio pridedama elemento kraštinė. Taigi, jei turėtumėte vaizdas tai buvo 50 pikselių pločio, o 2 pikselių kraštinė užims 54 pikselius (po 2 pikselius kiekvienai kraštinei). Tas pats vaizdas su 2 taškų kontūra jūsų puslapyje užims tik 50 taškų pločio, kontūras bus rodomas virš išorinio vaizdo krašto.
Kontūrai gali būti ne stačiakampiai
Prieš pradėdami galvoti „šaunu, dabar aš galiu piešti apskritimus“, pagalvok dar kartą. Šis teiginys turi kitą prasmę, nei galėtumėte pagalvoti. Kai uždedate elemento kraštinę, naršyklė interpretuoja elementą taip, tarsi tai būtų milžiniška stačiakampio formos dėžutė. Jei laukelis padalijamas per kelias eilutes, naršyklė tiesiog palieka kraštus atvirus, nes laukelis nėra uždarytas. Tarsi naršyklė matytų kraštą su be galo plačiu ekranu - pakankamai plačiu, kad ta kraštinė būtų vienas ištisinis stačiakampis.
Priešingai, kontūro ypatybė atsižvelgia į kraštus. Jei nubrėžtas elementas apima kelias eilutes, kontūras uždaromas eilutės pabaigoje ir vėl atsidaro kitoje eilutėje. Jei įmanoma, kontūras taip pat išliks visiškai sujungtas, sukurdamas ne stačiakampę formą.
Kontūrinės nuosavybės naudojimas
Vienas iš geriausių kontūro ypatybių yra paryškinti paieškos terminus. Daugelis svetainių tai daro su fono spalva, tačiau taip pat galite naudoti kontūro ypatybę ir nesijaudinti pridėdami papildomų tarpų savo puslapiuose.
Ypatybė „kontūro spalva“ priima terminą „apversti“, todėl kontūro spalva tampa atvirkštine esamo fono spalva. Tai leidžia jums paryškinti elementus dinaminiuose tinklalapiuose, nereikia žinoti ko naudojamos spalvos.
Taip pat galite naudoti ypatybę kontūras, kad pašalintumėte punktyrinę liniją aplink aktyvias nuorodas. Šis straipsnis iš CSS-gudrybės parodo kaip nuimkite punktyrinį kontūrą.