La outline-offsetproprietà in CSS sposta un contorno definito dal bordo del bordo di un elemento di una quantità specificata. Un contorno, che è diverso da un bordo, non occupa alcuno spazio sulla pagina (come un elemento posizionato in modo assoluto) quindi il contorno può essere spostato in qualsiasi quantità e non influenzerà la posizione o il layout degli elementi circostanti.
.example ( outline: solid 2px blue; outline-offset: 10px; )I contorni definiti utilizzando la outlineproprietà sono spesso usati come anelli di messa a fuoco, per l'accessibilità. Pertanto, la outline-offsetproprietà consente di modificare la posizione dell'anello di messa a fuoco.
Valori
outline-offset accetta un tipo di valore, una lunghezza, che può essere:
0(il predefinito)- Qualsiasi altra lunghezza valida con un'unità specificata (compresi i valori negativi)
Nota che outline-offset, come outline-width, non accetta valori percentuali.
Posizionamento del profilo
Per impostazione predefinita, il contorno di un elemento viene disegnato immediatamente al di fuori del bordo (o immediatamente al di fuori del punto in cui il bordo verrebbe disegnato se fosse definito un bordo). Pertanto, è tecnicamente possibile combinare contorno e bordo per un effetto a due bordi:
Da lì, outline-offsetpuò essere utilizzato per modificare la posizione del contorno rispetto al bordo del bordo. Prova la demo di seguito che ti consente di modificare in modo interattivo il valore di offset del contorno utilizzando il cursore. Il valore dell'offset viene visualizzato sulla pagina mentre si sposta il cursore:
Come accennato in precedenza, outline-offsetaccetta valori negativi, che sfalseranno il contorno nella direzione opposta (verso il centro dell'elemento), come mostrato nella prossima demo interattiva. Nota che lo schema inizia a -40px:
Se visualizzi la demo di cui sopra in Firefox, noterai che il contorno all'inizio appare corretto, ma quando il cursore viene regolato il contorno non viene visualizzato in modo uniforme e finisce nella posizione sbagliata. Lo scorrimento dell'elemento fuori dalla vista, quindi di nuovo in vista, forza il browser a ridipingere il contorno nella posizione corretta. Questo sembra essere un bug solo per Firefox.
Non fa parte della outlinestenografia
Simile alla borderproprietà, la outlineproprietà è una scorciatoia che rappresenta tre proprietà: outline-color, outline-style, e outline-width.
La outline-offsetproprietà, quindi, non è rappresentata in questa o in altre proprietà stenografiche, quindi deve essere dichiarata separatamente dallo schema definito stesso.
Relazionato
- schema
- confine
Maggiori informazioni
- offset di contorno su W3C
Supporto browser
Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.
Desktop
| Cromo | Firefox | IE | Bordo | Safari |
|---|---|---|---|---|
| 4 | 2 | 11 | 15 | 3.1 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
L'indicatore "parziale" per IE significa che IE non supporta outline-offset, ma supporta la outlinestenografia e le tre proprietà che rappresenta.
Oltre al bug menzionato sopra nella sezione "Posizionamento del contorno", c'è un bug in Firefox in cui il contorno viene disegnato in modo errato se l'elemento ha un elemento figlio che supera il confine genitore (ad esempio utilizzando margini negativi o posizionamento assoluto) . Pertanto, il outline-offsetvalore sarà relativo al limite esteso creato dal figlio in overflow, piuttosto che ai limiti dell'elemento genitore originale. Per capirlo meglio, vedi questo CodePen, questo thread di Stack Overflow e questo rapporto sui bug (credito al lettore Matt Vanes per aver inviato questo bug).