CSS-Konturfarbe

CSS-Konturfarbe

outline-color Das Attribut wird verwendet, um die Konturfarbe zu setzen.

Farben können auf folgende Weise eingestellt werden:

  • name - Spezifiziert Farbnamen, z.B. "red"
  • HEX - Spezifiziert Hexadezimalwerte, z.B. "#ff0000"
  • RGB - Spezifiziert RGB-Werte, z.B. "rgb(255,0,0)"
  • HSL - Spezifiziert HSL-Werte, z.B. "hsl(0, 100%, 50%)"
  • invert - Führt eine Farbkontrastumkehr durch (stellt sicher, dass die Kontur sichtbar ist, unabhängig von der Farbe des Hintergrundes)

Das folgende Beispiel zeigt verschiedene Farben und Konturstile. Beachten Sie, dass diese Elemente im Konturbereich auch eine schwarze dünne Rahmenkante haben:

Rote gestrichelte Kontur.

Blaue gepunktete Kontur.

Schwarze, konvexe 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;
}

Versuchen Sie es selbst

HEX-Werte

Sie können auch die Hexadezimalwerte (HEX) verwenden, um die Konturfarbe zu spezifizieren:

Beispiel

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

Versuchen Sie es selbst

RGB-Werte

oder indem man die RGB-Werte verwendet:

Beispiel

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

Versuchen Sie es selbst

HSL-Werte

Sie können auch HSL-Werte verwenden:

Beispiel

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

Versuchen Sie es selbst

Sie können in unserem CSS-Farben In diesem Kapitel können Sie mehr über HEX, RGB und HSL-Werte erfahren.

Farbkonvertierung

Farbkonvertierung Das folgende Beispiel verwendetoutline-color: invert

Dunkle Farben umkehren, um die Kontur sichtbar zu machen. Dies stellt sicher, dass die Kontur immer sichtbar ist, unabhängig vom Hintergrundfarbe:

Beispiel

p.ex1 {
  border: 1px solid yellow;
  outline-style: solid;
  outline-color: invert;
}

Versuchen Sie es selbst