CSS kontur

Dette element har en sort kant og en blå kontur, bredde på 10px.

CSS kontur

Kontur er en linje, der tegnes omkring elementet, uden for kanten, for at fremhæve elementet.

CSS har følgende konturegenskaber:

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

Bemærk:Kontur medKantForskellige! Forskellen ligger i, at konturen tegnes uden for elementets kant og kan overlappe med andet indhold. Samme, konturen er ikke en del af elementets størrelse; elementets samlede bredde og højde påvirkes ikke af konturlinjens bredde.

CSS konturlister

outline-style egenskaben specificerer konturens stil og kan indstilles til følgende værdier:

  • dotted - Definer punkt linje kontur.
  • dashed - Definer brud linje kontur.
  • solid - Definer solid linje kontur.
  • double - Definer dobbelt linje kontur.
  • groove - Definer 3D dybde skål kontur.
  • ridge - Definer 3D højde skål kontur.
  • inset - Definer 3D dybde kontur.
  • outset - Definer 3D højde kontur.
  • none - Definer ingen kontur.
  • hidden - Definer skjult kontur.

Følgende eksempel viser forskellige outline-style værdier:

Eksempel

Demonstration af forskellige konturlister:

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Resultat:

Punktkontur.

Streng kontur.

Fast linje kontur.

Dobbeltstreg kontur.

3D skål kant kontur. Dette effekt afhænger af outline-color værdien.

3D skål kant kontur. Dette effekt afhænger af outline-color værdien.

3D indhævet kant kontur. Dette effekt afhænger af outline-color værdien.

3D fremhævet kant kontur. Dette effekt afhænger af outline-color værdien.

Prøv det selv

Bemærk:medmindre der er sat outline-style Egenskaber, ellers vil andre kontur egenskaber (der vil blive beskrevet i det næste kapitel) ikke have nogen effekt!