CSS Outline-egenskaper


Innehållsförteckning

    Visa innehållsförteckning


En kontur är en linje som ritas utanför elementets kant.


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

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>



CSS-översikt

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.



CSS-konturstil

Egenskapen outline-style anger stilen för dispositionen, och kan ha ett av följande värden:

dotted

- Definierar en prickad kontur

dashed

- Definierar en streckad kontur

solid

- Definierar en solid kontur

double

- Definierar en dubbel kontur

groove

- Definierar en 3D-räfflad kontur

ridge

- Definierar en 3D-kantad kontur

inset

- Definierar en 3D-infälld kontur

outset

- Definierar en 3D-utgångskontur

none

- Definierar ingen kontur

hidden

- Definierar en dold kontur

Följande exempel visar de olika värdena för outline-style:

Exempel

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!