CSS -omtrekkleur
CSS-omtrekkleur
De outline-coloreigenschap wordt gebruikt om de kleur van de omtrek in te stellen.
De kleur kan worden ingesteld door:
- naam - geef een kleurnaam op, zoals "rood"
- HEX - geef een hexadecimale waarde op, zoals "#ff0000"
- RGB - geef een RGB-waarde op, zoals "rgb(255,0,0)"
- HSL - geef een HSL-waarde op, zoals "hsl(0, 100%, 50%)"
- omkeren - voert een kleuromkering uit (die ervoor zorgt dat de omtrek zichtbaar is, ongeacht de kleurachtergrond)
Het volgende voorbeeld toont enkele verschillende contouren met verschillende kleuren. Merk ook op dat deze elementen ook een dunne zwarte rand binnen de omtrek hebben:
Een stevige rode omtreklijn.
Een gestippelde blauwe omtrek.
Een begin grijze omtrek.
Voorbeeld
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-waarden
De omtrekkleur kan ook worden gespecificeerd met een hexadecimale waarde (HEX):
Voorbeeld
p.ex1 {
outline-style: solid;
outline-color: #ff0000;
/* red */
}
RGB-waarden
Of door RGB-waarden te gebruiken:
Voorbeeld
p.ex1 {
outline-style: solid;
outline-color: rgb(255, 0, 0); /*
red */
}
HSL-waarden
U kunt ook HSL-waarden gebruiken:
Voorbeeld
p.ex1 {
outline-style: solid;
outline-color: hsl(0, 100%, 50%);
/* red */
}
U kunt meer leren over HEX-, RGB- en HSL-waarden in onze hoofdstukken over CSS-kleuren .