Outline in CSS

Un Outline è una linea che viene disegnata intorno agli elementi, FUORI dai bordi, per far risaltare l’elemento.

CSS ha le seguenti proprietà di contorno:

• outline-style (stile contorno)
• outline-color (colore contorno)
• outline-width (larghezza contorno)
• outline-offset (offset contorno)
• outline (contorno)

CSS Larghezza del Outline

La proprietà outline-width specifica la larghezza del contorno e può avere uno dei seguenti valori:

• thin (tipicamente 1px)
• medium (tipicamente 3px)
• thick (tipicamente 5px)
• una dimensione specifica (in px, pt, cm, em, ecc)

/* Esempio di diverse larghezze di contorno */
p.uno {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thin;
}

p.due {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: medium;
}

p.tre {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thick;
}

p.quattro {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: 4px;
}

CSS Colore del Outline

La proprietà outline-color viene utilizzata per impostare il colore del contorno.

Il colore può essere impostato tramite:

• nome: specifica un nome di colore, come “red”
• HEX: specifica un valore HEX, come “#ff0000”
• RGB: specifica un valore RGB, come “rgb(255,0,0)”
• HSL: specifica un valore HSL, come “hsl(0, 100%, 50%)”
• invert: esegue un’inversione di colore (assicura che il contorno sia visibile, indipendentemente dallo sfondo del colore)

/* Esempio di diversi colori di contorno */
p.uno {
  border: 2px solid black;
  outline-style: solid;
  outline-color: red;
}

p.due {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: blue;
}

p.tre {
  border: 2px solid black;
  outline-style: outset;
  outline-color: grey;
}

Outline CSS Scorciatoia

La proprietà outline è una proprietà abbreviata per impostare le seguenti proprietà di contorno individuali:

• outline-width (larghezza contorno)
• outline-style (stile contorno, obbligatorio)
• outline-color (colore contorno)

La proprietà outline viene specificata come uno, due o tre valori dalla lista sopra. L’ordine dei valori non ha importanza.

/* Esempio di proprietà abbreviata di contorno */
p.uno {
  outline: dashed;
}
p.due {
  outline: dotted red;
}
p.tre {
  outline: 5px solid yellow;
}
p.quattro {
  outline: thick ridge pink;
}

Outline CSS - Proprietà Offset

La proprietà outline-offset aggiunge spazio tra un contorno e il bordo di un elemento. Lo spazio tra un elemento e il suo contorno è trasparente.

L’esempio seguente specifica un contorno 15px al di fuori del bordo:

Questo paragrafo ha un contorno 15px al di fuori del bordo.

p {
  margin: 30px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}