CSS -Umrissfarbe
CSS-Umrissfarbe
Die outline-colorEigenschaft wird verwendet, um die Farbe der Umrandung festzulegen.
Die Farbe kann eingestellt werden durch:
- name - Geben Sie einen Farbnamen an, z. B. "rot".
- HEX - geben Sie einen Hex-Wert an, wie "#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 Farbumkehrung durch (wodurch sichergestellt wird, dass der Umriss unabhängig vom farbigen Hintergrund sichtbar ist)
Das folgende Beispiel zeigt einige unterschiedliche Umrisse mit unterschiedlichen Farben. Beachten Sie auch, dass diese Elemente auch einen dünnen schwarzen Rand innerhalb der Kontur haben:
Ein durchgezogener roter Umriss.
Ein gepunkteter blauer Umriss.
Eine anfängliche graue Kontur.
Beispiel
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;
}
HEX-Werte
Die Umrissfarbe kann auch mit einem Hexadezimalwert (HEX) angegeben werden:
Beispiel
p.ex1 {
outline-style: solid;
outline-color: #ff0000;
/* red */
}
RGB-Werte
Oder mit RGB-Werten:
Beispiel
p.ex1 {
outline-style: solid;
outline-color: rgb(255, 0, 0); /*
red */
}
HSL-Werte
Sie können auch HSL-Werte verwenden:
Beispiel
p.ex1 {
outline-style: solid;
outline-color: hsl(0, 100%, 50%);
/* red */
}
Mehr über HEX-, RGB- und HSL-Werte erfahren Sie in unseren Kapiteln zu CSS-Farben .