Die Eigenschaft outline-color
wird verwendet, um die Farbe der Kontur festzulegen.
Die Farbe kann eingestellt werden durch:
Name - Geben Sie einen Farbnamen an, z. B. „rot“.
HEX - Geben Sie einen Hexadezimalwert an, z. B. „#ff0000“.
RGB - Geben Sie einen RGB-Wert an, z. B. „rgb(255,0,0)“.
HSL - Geben Sie einen HSL-Wert an, z. B. „hsl(0, 100 %, 50 %)“
invertieren - führt eine Farbinvertierung durch (wodurch sichergestellt wird, dass der Umriss unabhängig vom farbigen Hintergrund sichtbar ist)
Das folgende Beispiel zeigt verschiedene Umrisse mit unterschiedlichen Farben. Beachten Sie auch, dass diese Elemente innerhalb der Kontur auch einen dünnen schwarzen Rand haben:
A solid red outline.
A dotted blue outline.
An outset grey outline.
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;
}
Probieren Sie es selbst aus →
<!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>
Die Umrissfarbe kann auch über einen Hexadezimalwert (HEX) angegeben werden:
p.ex1 {
outline-style: solid;
outline-color: #ff0000;
/* red */
}
Probieren Sie es selbst aus →
<!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>
Oder indem Sie RGB-Werte verwenden:
p.ex1 {
outline-style: solid;
outline-color: rgb(255, 0, 0); /*
red */
}
Probieren Sie es selbst aus →
<!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>
Sie können auch HSL-Werte verwenden:
p.ex1 {
outline-style: solid;
outline-color: hsl(0, 100%, 50%);
/* red */
}
Probieren Sie es selbst aus →
<!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>
Weitere Informationen zu HEX-, RGB- und HSL-Werten finden Sie in unseren Kapiteln zu CSS-Farben.