Egenskapen CSS-kontur är en förvirrande egenskap. När du först lär dig om det, är det svårt att förstå hur det än är annorlunda än gränsen. W3C förklarar att den har följande skillnader:
- Konturer tar inte plats.
- Konturer kan vara icke-rektangulära.
Konturer tar inte upp utrymme
Detta uttalande är i sig själv förvirrande. Hur kan ett objekt på din webbsida inte ta upp plats på webbsidan? Men om du tänker på din webbsida som en lök kan varje föremål på sidan lagras ovanpå ett annat objekt. Områdesegenskapen tar inte upp utrymme eftersom det alltid placeras ovanpå elementets lådor.
När en disposition placeras runt ett element, har det ingen inverkan på hur det här elementet läggs ut på sidan. Det ändrar inte elementets storlek eller position. Om du lägger en disposition på ett element kommer det att ta upp samma mängd utrymme som om du inte hade en översikt över det här elementet. Detta gäller inte en gräns. En kant på ett element läggs till elementets yttre bredd och höjd. Så om du hade en bild som var 50 pixlar bred, med en 2 pixel gräns, skulle det ta upp 54 pixlar (2 pixlar för varje sidokant). Samma bild med en 2-pixel skiss skulle ta upp endast 50 pixlar bredd på din sida, skissen skulle visas över bildens utkant.
Konturer kan vara icke-rektangulära
Innan du börjar tänka "cool, nu kan jag rita cirklar", tänk igen. Detta uttalande har en annan betydelse än du kanske tror. När du lägger en gräns på ett element tolkar webbläsaren elementet som om det var en jätte rektangulär låda. Om rutan delas över flera rader lämnar webbläsaren bara kanterna öppna eftersom rutan inte är stängd. Det är som om webbläsaren ser gränsen med en oändligt bred skärm - tillräckligt bred för att gränsen ska vara en kontinuerlig rektangel.
Däremot tar konturegenskapen hänsyn till kanterna. Om ett skisserat element sträcker sig över flera rader stänger konturen i slutet av raden och öppnas igen på nästa rad. Om möjligt kommer sammanfattningen också att vara helt ansluten och skapa en icke-rektangulär form.
Användning av kontorsfastigheten
En av de bästa användningarna av konturegenskapen är att markera sökord. Många webbplatser gör detta med en bakgrundsfärg, men du kan också använda konturegenskapen och inte oroa dig för att lägga till extra avstånd på dina sidor.
Egenskapen konturfärg accepterar termen "invert" vilket gör konturfärgen den inverse av den aktuella bakgrunden. Detta låter dig markera element på dynamiska webbsidor utan att behöva veta vilka färger som används.
Du kan också använda konturegenskapen för att ta bort den prickade raden runt aktiva länkar. Den här artikeln från CSS-Tricks visar hur du tar bort den prickade konturen.
