En kontur är en linje som ritas utanför elementets kant.
Prova själv →
<!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>
En kontur är en linje som dras runt element, UTANFÖR gränserna, för att få elementet att "sticka ut".
CSS har följande konturegenskaper:
outline-style
outline-color
outline-width
outline-offset
outline
Obs! Kontur skiljer sig från gränser! Till skillnad från gränsen är konturen ritas utanför elementets gräns och kan överlappa annat innehåll. Konturen är också INTE en del av elementets dimensioner; elementets totala bredd och höjd påverkas inte av konturens bredd.
Egenskapen outline-style
anger stilen för dispositionen, och kan ha ett av följande värden:
- Definierar en prickad kontur
- Definierar en streckad kontur
- Definierar en solid kontur
- Definierar en dubbel kontur
- Definierar en 3D-räfflad kontur
- Definierar en 3D-kantad kontur
- Definierar en 3D-infälld kontur
- Definierar en 3D-utgångskontur
- Definierar ingen kontur
- Definierar en dold kontur
Följande exempel visar de olika värdena för outline-style
:
Demonstration av de olika konturstilarna:
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.
Prova själv →
<!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>
Obs: Ingen av de andra dispositionsegenskaperna (som du kommer att lära dig mer om i nästa kapitel) kommer att ha NÅGON effekt om inte Egenskapen class="w3-codespan">outline-style
är inställd!