Det CSS omrids ejendom er en forvirrende ejendom. Når du først lærer om det, er det svært at forstå, hvordan det endda adskiller sig fra grænseejendommen. W3C forklarer det som at have følgende forskelle:
- Konturer tager ikke plads.
- Konturer kan være ikke-rektangulære.
Konturer tager ikke plads
Denne erklæring er i sig selv forvirrende. Hvordan kan et objekt på din webside ikke optage plads på websiden? Men hvis du tænker på din webside som en løg, kan hvert element på siden være lagdelt oven på et andet element. Konturegenskaben tager ikke plads, fordi den altid er placeret oven på elementets kasse.
Når en omrids placeres omkring et element, har det ingen indflydelse på, hvordan elementet er lagt ud på siden. Det ændrer ikke elementets størrelse eller position. Hvis du sætter en kontur på et element, vil det tage samme plads, som hvis du ikke havde en kontur af dette element. Dette gælder ikke for en grænse. En kant på et element føjes til elementets udvendige bredde og højde. Så hvis du havde en
billede der var 50 pixels bredt, med en 2-pixel kant, ville det tage 54 pixels (2 pixels for hver sidegrænse). Det samme billede med en 2-pixel omrids ville kun tage 50 pixels bredde på din side, og konturen ville blive vist over den udvendige kant af billedet.Konturer kan være ikke-rektangulære
Inden du begynder at tænke "sejt, nu kan jeg tegne cirkler," tænk igen. Denne erklæring har en anden betydning, end du måske tror. Når du sætter en kant på et element, fortolker browseren elementet som om det var en kæmpe rektangulær boks. Hvis boksen deles over flere linjer, lader browseren bare kanterne være åbne, fordi boksen ikke er lukket. Det er som om browseren ser grænsen med en uendeligt bred skærm - bred nok til, at grænsen er et kontinuerligt rektangel.
I kontrast til dette tager konturegenskaben kanter i betragtning. Hvis et omridset element spænder over flere linjer, lukkes omridset i slutningen af linjen og åbnes igen på den næste linje. Hvis det er muligt, forbliver omridset også fuldt forbundet, hvilket skaber en ikke-rektangulær form.
Anvendelse af omridsegenskaben
En af de bedste anvendelser af omridsegenskaben er at fremhæve søgeudtryk. Mange sider gør dette med en baggrundsfarve, men du kan også bruge omridsegenskaben og ikke bekymre dig om at tilføje ekstra mellemrum på dine sider.
Konturfarveegenskaben accepterer udtrykket "inverter", hvilket gør konturfarven omvendt af den aktuelle baggrund. Dette giver dig mulighed for at fremhæve elementer på dynamiske websider uden at skulle vide hvad farver bruges.
Du kan også bruge omridsegenskaben til at fjerne den stiplede linje omkring aktive links. Denne artikel fra CSS-tricks viser hvordan man gør fjern det stiplede omrids.