Kolor konturu CSS
- Poprzednia strona Szerokość konturu CSS
- Następna strona Atrybuty skrócone 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; }
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 */ }
wartość RGB
lub używając wartości RGB:
Przykład
p.ex1 { outline-style: solid; outline-color: rgb(255, 0, 0); /* czerwony */ }
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 */ }
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: invert
Wykonano 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; }
- Poprzednia strona Szerokość konturu CSS
- Następna strona Atrybuty skrócone konturu CSS