CSS Outline-egenskaber

Indholdsfortegnelse

En kontur er en linje tegnet uden for elementets kant.

This element has a black border and a green outline with a width of 10px.

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid black;
  outline: #4CAF50 solid 10px;
  margin: auto;  
  padding: 20px;
  text-align: center;
}
</style>
</head>
<body>

<h2>CSS Outline</h2>
<p>This element has a 2px black border and a green outline with a width of 10px.</p>

</body>
</html>

CSS-oversigt

En kontur er en streg, der tegnes rundt om elementer, UDEN FOR grænserne, for at få elementet til at "skille sig ud".

CSS har følgende dispositionsegenskaber:

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

Bemærk: Omrids adskiller sig fra grænser! I modsætning til grænsen er omridset tegnet uden for elementets grænse og kan overlappe andet indhold. Det er også omridset IKKE en del af elementets dimensioner; elementets samlede bredde og højde påvirkes ikke af omridsets bredde.

CSS-konturstil

Egenskaben outline-style angiver stilen for dispositionen, og kan have en af følgende værdier:

dotted: - Definerer en stiplet omrids
dashed: - Definerer en stiplet omrids
solid: - Definerer en solid kontur
double: - Definerer en dobbelt omrids
groove: - Definerer en 3D-rillet kontur
ridge: - Definerer en 3D rillet kontur
inset: - Definerer en 3D indsat omrids
outset: - Definerer en 3D-udgangskontur
none: - Definerer ingen kontur
hidden: - Definerer en skjult kontur

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

Eksempel

Demonstration af de forskellige konturstile:

 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 :

A dotted outline.

A dashed outline.

A solid outline.

A double outline.

A groove outline. The effect depends on the outline-color value.

A ridge outline. The effect depends on the outline-color value.

An inset outline. The effect depends on the outline-color value.

An outset outline. The effect depends on the outline-color value.

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
p {outline-color:red;}

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;}
</style>
</head>
<body>

<h2>The outline-style Property</h2>

<p class="dotted">A dotted outline</p>
<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline. The effect depends on the outline-color value.</p>
<p class="ridge">A ridge outline. The effect depends on the outline-color value.</p>
<p class="inset">An inset outline. The effect depends on the outline-color value.</p>
<p class="outset">An outset outline. The effect depends on the outline-color value.</p>

</body>
</html>

Bemærk: Ingen af de andre dispositionsegenskaber (som du vil lære mere om i de næste kapitler) vil have NOGEN effekt, medmindre Egenskaben class="w3-codespan">outline-style er indstillet!