Kolor konturu CSS

Kolor konturu CSS

outline-color Atrybut służy do ustawiania koloru konturu.

Możesz ustawić kolor w następujący sposób:

  • name - określ nazwę koloru, np. "czerwony"
  • HEX - określ wartość szesnastkową, np. "#ff0000"
  • RGB - określ wartość RGB, np. "rgb(255,0,0)"
  • HSL - określ wartość HSL, np. "hsl(0, 100%, 50%)"
  • invert - wykona kolor odwrócony (upewnia się, że kontur jest widoczny, niezależnie od koloru tła)

Poniższy przykład pokazuje różne kolory i style konturów. Proszę zauważyć, że te elementy mają również czarną cienką ramkę wewnętrzną:

czerwony ciągły kontur.

niebieski punktowy kontur.

szary wypukły kontur.

Przykład

p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: czerwony;
}
p.ex2 {
  border: 2px solid black;
  outline-style: przerywany;
  outline-color: niebieski;
}
p.ex3 {
  border: 2px solid black;
  outline-style: outset;
  outline-color: szary;
}

Spróbuj sam

wartość HEX

Możesz również użyć wartości szesnastkowej (HEX) do określenia koloru konturu:

Przykład

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

Spróbuj sam

wartość RGB

lub używając wartości RGB:

Przykład

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

Spróbuj sam

Wartości HSL

Możesz również użyć wartości HSL:

Przykład

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

Spróbuj sam

Możesz znaleźć więcej informacji w naszej Kolory CSS możesz nauczyć się więcej o wartościach HEX, RGB i HSL w tej sekcji.

odwróconego koloru

Poniższy przykład używa outline-color: invertWykonano odwrócenie koloru. Można to zrobić, aby upewnić się, że kontur jest widoczny niezależnie od koloru tła:

Kontur o odwróconym kolorze.

Przykład

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

Spróbuj sam