Kolor konturu CSS
Kolor konturu CSS
Właściwość outline-color
służy do ustawienia koloru konturu.
Kolor można ustawić poprzez:
- nazwa - 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 - wykonuje odwrócenie koloru (co zapewnia widoczność konturu niezależnie od koloru tła)
Poniższy przykład pokazuje różne kontury w różnych kolorach. Zauważ również, że te elementy mają również cienką czarną obwódkę wewnątrz konturu:
Solidny czerwony kontur.
Kropkowany niebieski kontur.
Szary kontur na początku.
Przykład
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;
}
Wartości szesnastkowe
Kolor konturu można również określić za pomocą wartości szesnastkowej (HEX):
Przykład
p.ex1 {
outline-style: solid;
outline-color: #ff0000;
/* red */
}
Wartości RGB
Lub używając wartości RGB:
Przykład
p.ex1 {
outline-style: solid;
outline-color: rgb(255, 0, 0); /*
red */
}
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%);
/* red */
}
Możesz dowiedzieć się więcej o wartościach HEX, RGB i HSL w naszych rozdziałach Kolory CSS .