CSS kontūrai yra daugiau nei tik siena
CSS schemos nuosavybė yra paini savybė. Kai pirmą kartą sužinojote apie tai, sunku suprasti, kaip jis netgi toli gražu skiriasi nuo pasienio nuosavybės. W3C paaiškina, kad yra šie skirtumai:
- Kontūrai neužima vietos.
- Kontūrai gali būti ne stačiakampiai.
Kontūrai nepriima vietos
Šis pareiškimas pats savaime yra paini. Kaip tinklalapyje esantis objektas svetainėje nepadaro vietos? Bet jei jūs manote, kad jūsų tinklalapis yra kaip svogūnas, kiekvienas elementas puslapyje gali būti sluoksniuotas ant kito elemento. Objekto savybė neužima vietos, nes ji visada dedama ant elemento dėžutės viršuje.
Kai aplink elementą yra brėžiniai, tai neturi jokios įtakos tai, kaip šis elementas yra išdėstytas puslapyje. Tai nekeičia elemento dydžio ar pozicijos. Jei nustatysite elemento brėžinį, jis užims tokį patį kiekį vietos, kokiu neturėtumėte šio elemento brėžinių. Tai netiesa sienai. Elemento sienelė pridedama prie elemento išorinio pločio ir aukščio. Taigi, jei jūs turėjote 50 pikselių pločio vaizdą su 2 pikselių kraštu, jis užims 54 pikselius (2 pikseliai kiekvienai šoninei sienai). Tas pats vaizdas su 2 pikselių kontūrais jūsų puslapyje užtruks tik 50 pikselių plotį, kontūrai bus rodoma virš išorinio vaizdo krašto.
Apibendrinimas gali būti ne stačiakampis
Prieš pradedant galvoti "atvėsti, dabar galiu atkreipti ratus!" Pagalvok dar kartą. Šis teiginys turi kitokią prasmę nei jūs manote. Kai elementą sukūrėte sieną, naršyklė aiškina elementą taip, lyg jis būtų vienas milžiniškas stačiakampio formos langelis. Jei dėžutė pasiskirsto kelias eilutes, naršyklė palieka kraštus atidaryti, nes langelis nėra uždarytas. Tarsi naršyklė matytų kraštą be galo plataus ekrano - pakankamai platus, kad ši siena būtų vientisas stačiakampis.
Priešingai, kontūro nuosavybė atsižvelgia į kraštus. Jei suplanuotas elementas apima kelias eilutes, kontūra uždaroma linijos gale ir vėl atsinaujina kitoje eilutėje. Jei įmanoma, kontūras bus visiškai prijungtas taip, kad sukurtumėte ne stačiakampę formą.
Pagrindinio turto naudojimas
Vienas iš geriausių konteksto turinio naudojimo būdų yra paryškinti paieškos terminus. Daugelis svetainių tai daro naudodami fono spalvą, tačiau taip pat galite naudoti turinio struktūrą ir nesijaudinkite, ar norite pridėti papildomų tarpų savo puslapiuose.
Kontūro spalvos nuosavybė priima sąvoką "invertuoti", todėl kontūro spalva yra atvirkštinė iš dabartinio fono. Tai leidžia jums paryškinti elementus dinamiškuose tinklalapiuose, nereikia žinoti, kokios spalvos yra naudojamos .
Taip pat galite naudoti kontūro nuosavybę, kad pašalintumėte punktyrinę liniją aplink aktyvias nuorodas. Šis straipsnis iš CSS-Tricks parodo, kaip pašalinti taškinę kontūrą.