Proprietà CSS outline-offset
La proprietà CSS outline-offset definisce lo spazio tra il contorno e il bordo di un elemento. Scopri i valori e gli esempi.
La proprietà outline-offset specifica la quantità di spazio tra il contorno di un elemento e il suo bordo. Lo spazio aggiunto da outline-offset è sempre trasparente, quindi lo sfondo della pagina (o qualsiasi cosa si trovi dietro l'elemento) è visibile attraverso il gap.
Questa pagina illustra cosa fa outline-offset, come si comportano i valori positivi e negativi, quando è utile usarla e gli aspetti da tenere a mente.
Come i contorni differiscono dai bordi
outline-offset ha senso solo quando si capisce come funzionano i contorni, poiché si comportano in modo molto diverso dai bordi:
- Un contorno viene disegnato all'esterno del bordo dell'elemento — per impostazione predefinita è adiacente al bordo.
- Un contorno non occupa spazio nel layout, quindi aggiungerne o spostarne uno non sposta mai gli elementi circostanti.
- Un contorno può essere non rettangolare (ad esempio, avvolge ciascuna riga di un elemento inline su più righe).
Poiché un contorno non influisce sul layout, outline-offset è un modo sicuro per allontanare il contorno dall'elemento (o portarlo all'interno) senza rifluire la pagina. Questa proprietà è una delle proprietà CSS3.
Non fa parte della proprietà abbreviata outline. A differenza di outline-style, outline-color e outline-width, outline-offset deve sempre essere impostata come dichiarazione separata.
| Valore iniziale | 0 |
|---|---|
| Si applica a | Tutti gli elementi. |
| Ereditata | No. |
| Animabile | Sì. La larghezza dello spazio è animabile. |
| Versione | CSS3 |
| Sintassi DOM | object.style.outlineOffset = "20px"; |
Sintassi
Sintassi CSS outline-offset
outline-offset: length | initial | inherit;Esempio della proprietà outline-offset:
Esempio di codice CSS outline-offset
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.ex1 {
margin: 20px;
border: 2px dotted #000;
background-color: #8ebf42;
outline: 4px solid #666;
outline-offset: 10px;
}
</style>
</head>
<body>
<h2>Outline-offset property example</h2>
<div class="ex1">The outline-offset is 10px</div>
</body>
</html>Risultato
Nell'esempio precedente lo spazio tra il contorno e il bordo è di 10px, e lo sfondo della pagina è visibile attraverso quel gap trasparente.
Valori negativi
outline-offset accetta anche lunghezze negative. Un offset negativo sposta il contorno verso l'interno, così viene disegnato sopra il padding/contenuto dell'elemento invece che intorno ad esso:
outline-offset: -5px; /* outline moves 5px inside the border edge */Questo è utile quando si desidera un anello di focus che si trovi all'interno di un elemento fortemente compresso (ad esempio, un pulsante adiacente al bordo di un contenitore) senza che il contorno venga ritagliato da un antenato con overflow: hidden. Un offset negativo maggiore dell'elemento fa collassare e scomparire il contorno.
Quando usarla
- Anelli di focus distanziati. Abbina
:focus-visiblecon un piccolo offset positivo in modo che l'anello di focus da tastiera non si sovrapponga all'elemento. Non rimuovere mai il contorno senza fornire un'alternativa — è l'indicatore principale per gli utenti che usano la tastiera. - Effetti decorativi "doppio bordo" senza aggiungere un secondo elemento, poiché il gap dell'offset rivela lo sfondo.
- Evitare anelli ritagliati all'interno di contenitori scorrevoli, usando un piccolo offset negativo.
Valori
| Valore | Descrizione |
|---|---|
| length | Spazio tra il contorno e il bordo dell'elemento. Può essere negativo per disegnare il contorno all'interno del bordo. Il valore predefinito è 0. |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento genitore. |
Aspetti da tenere a mente
outline-offsetnon è ereditata — i figli non la ricevono automaticamente.- Le percentuali non sono consentite; funzionano solo le unità
length(px,em,rem, ecc.). - L'offset viene visualizzato solo quando un contorno è effettivamente visibile, cioè quando outline-style non è
nonee la larghezza è maggiore di zero. - Il gap è trasparente —
outline-offsetnon può avere un proprio colore.