CSS kontur

Detta element har en svart kant och en blå kontur, med en bredd på 10px.

CSS kontur

Kontur är en linje som ritas runt elementet, utanför kanten, för att betona elementet.

CSS har följande konturattribut:

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

Observera:Kontur ochKantOlika! Skillnaden är att konturritningarna ritas utanför elementets kant och kan överskrida annat innehåll. Detsamma gäller också för kontur, som inte är en del av elementets storlek; elementets totala bredd och höjd påverkas inte av konturens bredd.

CSS konturstil

outline-style-attributet specificerar konturens stil och kan ställas in till följande värden:

  • dotted - Definiera punktad kontur.
  • dashed - Definiera skuggad kontur.
  • solid - Definiera fast kontur.
  • double - Definiera dubbel kontur.
  • groove - Definiera 3D inåttagande kanal.
  • ridge - Definiera 3D utåttagande kanal.
  • inset - Definiera 3D inåttagande kontur.
  • outset - Definiera 3D utåttagande kontur.
  • none - Definiera ingen kontur.
  • hidden - Definiera dold kontur.

Nedan visas olika värden för outline-style:

Exempel

Visa olika konturstilar:

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.

Streckkontur.

Fyllnadskontur.

Dubbelkontur.

3D inskuren kontur. Effekten beror på outline-color-värdet.

3D utskuren kontur. Effekten beror på outline-color-värdet.

3D inbuktande kontur. Effekten beror på outline-color-värdet.

3D utbuktande kontur. Effekten beror på outline-color-värdet.

Prova själv

Observera:utom att outline-style Egenskap, annars kommer andra kontur egenskaper (som kommer att beskrivas mer i nästa kapitel) inte att ha någon effekt!