CSS-konturfärg


Innehållsförteckning

    Visa innehållsförteckning


CSS-konturfärg

Egenskapen outline-color används för att ställa in färgen på konturen.

Färgen kan ställas in av:

  • namn - ange ett färgnamn, som "röd"

  • HEX - ange ett hexadecimalt värde, som "#ff0000"

  • RGB - ange ett RGB-värde, som "rgb(255,0,0)"

  • HSL - ange ett HSL-värde, som "hsl(0, 100%, 50%)"

  • invertera - utför en färginversion (som säkerställer att konturen är synlig, oavsett färgbakgrund)

Följande exempel visar några olika konturer med olika färger. Lägg också märke till att dessa element också har en tunn svart ram inuti konturen:

A solid red outline.

A dotted blue outline.

An outset grey outline.

Exempel

p.ex1
{
    border: 2px solid black;	outline-style: solid;
  outline-color: red;
}
p.ex2
{
  border: 2px solid black;	outline-style: dotted;
   
outline-color: blue;
}
p.ex3
{
  border: 2px solid black;
  outline-style: outset;
  outline-color: grey;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: red;
}

p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: blue;
}

p.ex3 {
  border: 2px solid black;
  outline-style: outset;
  outline-color: grey;
}
</style>
</head>
<body>

<h2>The outline-color Property</h2>
<p>The outline-color property is used to set the color of the outline.</p>

<p class="ex1">A solid red outline.</p>
<p class="ex2">A dotted blue outline.</p>
<p class="ex3">An outset grey outline.</p>

</body>
</html>



HEX-värden

Konturfärgen kan också anges med ett hexadecimalt värde (HEX):

Exempel

 p.ex1 {
  outline-style: solid;
  outline-color: #ff0000; 
  /* red */
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: #ff0000; /* red */
}

p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: #0000ff; /* blue */
}

p.ex3 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: #bbbbbb; /* grey */
}
</style>
</head>
<body>

<h2>The outline-color Property</h2>
<p>The color of the outline can also be specified using a hexadecimal value (HEX):</p>

<p class="ex1">A solid red outline.</p>
<p class="ex2">A dotted blue outline.</p>
<p class="ex3">A solid grey outline.</p>

</body>
</html>




RGB-värden

Eller genom att använda RGB-värden:

Exempel

 p.ex1 {
  outline-style: solid;
  outline-color: rgb(255, 0, 0); /* 
  red */
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: rgb(255, 0, 0); /* red */
}

p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: rgb(0, 0, 255); /* blue */
}

p.ex3 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: rgb(187, 187, 187); /* grey */
}
</style>
</head>
<body>

<h2>The outline-color Property</h2>
<p>The color of the outline can also be specified using RGB values:</p>

<p class="ex1">A solid red outline.</p>
<p class="ex2">A dotted blue outline.</p>
<p class="ex3">A solid grey outline.</p>

</body>
</html>



HSL-värden

Du kan också använda HSL-värden:

Exempel

 p.ex1 {
  outline-style: solid;
  outline-color: hsl(0, 100%, 50%); 
  /* red */
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: hsl(0, 100%, 50%); /* red */
}

p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: hsl(240, 100%, 50%); /* blue */
}

p.ex3 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: hsl(0, 0%, 73%); /* grey */
}
</style>
</head>
<body>

<h2>The outline-color Property</h2>
<p>The color of the outline can also be specified using HSL values:</p>

<p class="ex1">A solid red outline.</p>
<p class="ex2">A dotted blue outline.</p>
<p class="ex3">A solid grey outline.</p>

</body>
</html>


Du kan lära dig mer om HEX-, RGB- och HSL-värden i våra CSS Colors-kapitel.