Colore contorno CSS
Colore contorno CSS
La outline-colorproprietà viene utilizzata per impostare il colore del contorno.
Il colore può essere impostato da:
- nome - specifica un nome di colore, come "rosso"
- HEX: specifica un valore esadecimale, come "#ff0000"
- RGB: specifica un valore RGB, come "rgb(255,0,0)"
- HSL: specifica un valore HSL, ad esempio "hsl(0, 100%, 50%)"
- invert - esegue un'inversione del colore (che assicura che il contorno sia visibile, indipendentemente dal colore di sfondo)
L'esempio seguente mostra alcuni contorni diversi con colori diversi. Nota anche che questi elementi hanno anche un sottile bordo nero all'interno del contorno:
Un solido contorno rosso.
Un contorno blu punteggiato.
Un contorno grigio iniziale.
Esempio
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;
}
Valori esadecimali
Il colore del contorno può anche essere specificato utilizzando un valore esadecimale (HEX):
Esempio
p.ex1 {
outline-style: solid;
outline-color: #ff0000;
/* red */
}
Valori RGB
Oppure utilizzando i valori RGB:
Esempio
p.ex1 {
outline-style: solid;
outline-color: rgb(255, 0, 0); /*
red */
}
Valori HSL
Puoi anche utilizzare i valori HSL:
Esempio
p.ex1 {
outline-style: solid;
outline-color: hsl(0, 100%, 50%);
/* red */
}
Puoi saperne di più sui valori HEX, RGB e HSL nei nostri capitoli CSS Colors .