Colore del contorno CSS

Colore del contorno CSS

outline-color L'attributo viene utilizzato per impostare il colore del contorno.

Puoi impostare il colore in modo seguente:

  • name - Specifica il nome del colore, ad esempio "red"
  • HEX - Specifica un valore esadecimale, ad esempio "#ff0000"
  • RGB - Specifica un valore RGB, ad esempio "rgb(255,0,0)"
  • HSL - Specifica un valore HSL, ad esempio "hsl(0, 100%, 50%)"
  • invert - Esegui la反转颜色（Assicurati che il contorno sia visibile, indipendentemente dal colore dello sfondo）

Esempio di diversi colori e stili di contorno. Nota che questi elementi hanno anche un bordo sottile nero all'interno del contorno:

Contorno a linea continua rossa.

Contorno a punto blu.

Contorno convesso di colore grigio.

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;
}

Prova personalmente

Valore HEX

Puoi anche specificare il colore del contorno utilizzando un valore esadecimale (HEX):

Esempio

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

Prova personalmente

Valori RGB

o tramite l'uso dei valori RGB:

Esempio

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

Prova personalmente

Valori HSL

Puoi anche utilizzare valori HSL:

Esempio

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

Prova personalmente

Puoi trovare ulteriori informazioni sui valori HSL nel nostro Colori CSS in questo capitolo si apprendono ulteriori informazioni sui valori HEX, RGB e HSL.

colore invertito

L'esempio seguente utilizza outline-color: invertEseguita la反转颜色。In questo modo si garantisce che il contorno sia visibile indipendentemente dal colore di sfondo:

Contorno a linea continua di colore invertito.

Esempio

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

Prova personalmente