De CSS skiss egendom är en förvirrande egendom. När du först lär dig om det är det svårt att förstå hur det till och med skiljer sig från gränsegenskapen. W3C förklarar att den har följande skillnader:
- Konturer tar inte plats.
- Konturer kan vara icke-rektangulära.
Konturer tar inte plats
Detta uttalande är i och för sig förvirrande. Hur kan ett objekt på din webbsida inte ta plats på webbsidan? Men om du tycker att din webbsida är som en lök, kan varje objekt på sidan vara lagrad ovanpå ett annat objekt. Konturegenskapen tar inte plats eftersom den alltid placeras ovanpå elementets låda.
När en kontur placeras runt ett element påverkar det inte hur elementet läggs ut på sidan. Det ändrar inte elementets storlek eller position. Om du lägger en kontur på ett element tar det samma utrymme som om du inte hade en kontur av det elementet. Detta är inte sant för a gräns. En kant på ett element läggs till elementets yttre bredd och höjd. Så om du hade en bild det var 50 pixlar brett, med en 2-pixel kant, det skulle ta upp 54 pixlar (2 pixlar för varje sidoram). Samma bild med en kontur med två pixlar tar bara 50 pixlar i bredd på din sida, konturen visas över bildens yttre kant.
Konturer kan vara icke-rektangulära
Innan du börjar tänka "coolt, nu kan jag rita cirklar", tänk igen. Detta uttalande har en annan betydelse än du kanske tror. När du sätter en kant på ett element tolkar webbläsaren elementet som om det vore en jätte rektangulär ruta. 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 konturerat element sträcker sig över flera rader stängs konturen i slutet av raden och öppnas igen på nästa rad. Om möjligt förblir konturen också helt ansluten och skapar en icke-rektangulär form.
Användning av konturegenskapen
En av de bästa användningarna av konturegenskapen är att markera söktermer. 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 något extra avstånd på dina sidor.
Egenskaperna för konturfärg accepterar termen "invertera" vilket gör konturfärgen invers av den aktuella bakgrunden. Detta gör att du kan markera element på dynamiska webbsidor utan att behöva veta vad färger används.
Du kan också använda konturegenskapen för att ta bort den prickade linjen runt aktiva länkar. Denna artikel från CSS-tricks visar hur ta bort den prickade konturen.