Proprietà outline-offset

La proprietà outline-offset imposta l'offset del contorno esterno - un bordo che non occupa spazio. I valori accettati dalla proprietà sono qualsiasi unità di misura per dimensioni, eccetto le percentuali. Valore predefinito: 0. Un valore positivo sposta il contorno verso l'esterno dell'elemento, uno negativo - verso l'interno.

Sintassi

cssselettore {
  outline-offset: valore;
}

Esempio . Valore positivo

Il contorno si allontana dall'elemento (evidenziato con lo sfondo):

html<div id="elem"></div>

css#elem {
  outline-offset: 5px;
  outline-width: 1px;
  outline-style: solid;
  outline-color: black;
  background-color: #e4f1ed;
  width: 300px;
  height: 100px;
}

Результат:

Esempio . Valore negativo

Il contorno si trova all'interno dell'elemento:

html<div id="elem"></div>

css#elem {
  outline-offset: -10px;
  outline-width: 1px;
  outline-style: solid;
  outline-color: black;
  background-color: #e4f1ed;
  width: 300px;
  height: 100px;
}

Результат:

Esempio . Valore negativo outline + border

Si può creare questo interessante effetto (fate attenzione allo spessore dello spazio bianco tra i bordi, è 10px, non 14, poiché una parte è stata "mangiata" dallo spessore di outline di 4px):

html<div id="elem"></div>

css#elem {
  outline-offset: -14px;
  outline: 4px solid green;
  border: 4px solid red;
  width: 300px;
  height: 100px;
}

Результат:

Vedi anche