De CSS omriss eiendom er en forvirrende eiendom. Når du først lærer om det, er det vanskelig å forstå hvordan det til og med er forskjellig fra grenseeiendommen. W3C forklarer at den har følgende forskjeller:
- Konturer tar ikke plass.
- Konturene kan være ikke-rektangulære.
Konturene tar ikke plass
Denne uttalelsen er i seg selv forvirrende. Hvordan kan et objekt på nettsiden din ikke ta plass på websiden? Men hvis du tenker på websiden din som en løk, kan hvert element på siden legges på toppen av et annet element. Områdegenskapen tar ikke plass fordi den alltid er plassert på toppen av elementet.
Når en disposisjon plasseres rundt et element, har det ingen innvirkning på hvordan elementet er lagt ut på siden. Det endrer ikke elementets størrelse eller posisjon. Hvis du legger en disposisjon på et element, vil det ta like mye plass som om du ikke hadde en oversikt over det elementet. Dette gjelder ikke en grense. En kant på et element legges til den ytre bredden og høyden på elementet. Så hvis du hadde en
bilde som var 50 piksler bredt, med en 2-piksel ramme, ville det ta opp 54 piksler (2 piksler for hver sidekant). Det samme bildet med en 2-piksel omriss ville bare ta 50 piksler bredde på siden din, og omrisset ville vises over utsiden av bildet.Konturer kan være ikke-rektangulære
Før du begynner å tenke "kult, nå kan jeg tegne sirkler," tenk igjen. Denne påstanden har en annen betydning enn du kanskje tror. Når du setter en kant på et element, tolker nettleseren elementet som om det var en gigantisk rektangulær rute. Hvis boksen blir delt over flere linjer, lar nettleseren bare kantene være åpne fordi boksen ikke er lukket. Det er som om nettleseren ser grensen med en uendelig bredskjerm - bred nok til at grensen kan være ett sammenhengende rektangel.
Derimot tar omrissegenskapen hensyn til kanter. Hvis et omrisset element strekker seg over flere linjer, lukkes konturen på slutten av linjen og åpnes igjen på neste linje. Hvis det er mulig, vil omrisset også være fullt tilkoblet og skape en ikke-rektangulær form.
Bruk av omrissegenskapen
En av de beste bruksområdene for omrissegenskapen er å markere søkeord. Mange nettsteder gjør dette med en bakgrunnsfarge, men du kan også bruke områdegenskapen og ikke bekymre deg for å legge til ekstra mellomrom på sidene dine.
Konturfargeegenskapen aksepterer begrepet "invertere" som gjør omrissfargen omvendt av den nåværende bakgrunnen. Dette lar deg markere elementer på dynamiske websider uten å vite hva farger brukes.
Du kan også bruke områdegenskapen til å fjerne den stiplede linjen rundt aktive lenker. Denne artikkelen fra CSS-triks viser hvordan fjern prikkete omriss.