La proprietà outline
in CSS viene utilizzata per disegnare una linea attorno all'esterno di un elemento. È simile alla proprietà border
(che abbiamo visto nella lezione dei bordi), ma differisce dal fatto che l'outline non occupa spazio e non influisce sulla dimensione o la posizione dell'elemento.
Per capire in breve come funziona l'outline, prova a cliccare "Outline" qui sopra, poi "Rimuovi". Vedrai che la posizione dell'elemento grigio non è cambiata. Ora, prova a cliccare su "Bordo" e "Rimuovi": noterai la differenza, perché il testo si sarà spostato a causa di border
.
In questa lezione, vediamo le proprietà outline-style
, outline-width
, outline-color
, outline
e outline-offset
.
Lo stile dell'outline è definito tramite la proprietà outline-style
. Questa proprietà accetta i seguenti valori:
none
, non è visualizzato nessun outline.hidden
, definisce un outline nascosto (invisibile).solid
, definisce un outline costituito da una linea continua.dashed
, definisce un outline costituito da trattini.dotted
, definisce un outline costituito da punti.double
, definisce un outline costituito da due linee continue. La larghezza dell'outline (che vedremo più avanti in questa lezione) deve essere almeno 3 pixel per mostrare due linee.groove
, definisce un outline incassato, appare come se fosse intagliato nell'elemento.ridge
, definisce un outline in rilievo.inset
, definisce un outline che appare come se fosse inserito nell'elemento.outset
, definisce un outline che appare come se fosse in rilievo rispetto all'elemento.Vediamo un esempio di un outline formato da linea continua:
<div>Ciao a tutti</div>
<style>
div {
width: 200px;
height: 200px;
outline-style: solid;
}
</style>
Nell'esempio, abbiamo aggiunto height
e width
(che abbiamo visto nella lezione sulle dimensioni degli elementi) per rendere più visibile il <div>
.
Nota: l'outline è un elemento essenziale per rendere accessibile una pagina, in quanto viene utilizzato dagli screen reader (programmi utilizzato dai non vedenti o ipovedenti) per la selezione degli elementi. Non rimuovere l'outline (che in alcune pseudo-classi, che vedremo nella lezione dedicata, sono preimpostate) se non necessario.
La proprietà outline-width
in CSS specifica la larghezza/spessore della linea dell'outline di un elemento.
Puoi utilizzare questi valori con outline-width
:
thick
, specifica un outline spesso (solitamente corrisponde a circa 5-6 pixel).medium
, specifica un outline di larghezza media (solitamente corrisponde a circa 3-4 pixel). È il valore di default.thin
, specifica un outline sottile (solitamente corrisponde a circa 1 pixel).Nota: outline-style
è una proprietà obbligatoria da definire per creare l'outline.
Vediamo come creare un outline di 3 px:
<div>Ciao a tutti</div>
<style>
div {
width: 200px;
height: 200px;
outline-style: solid;
outline-width: 3px;
}
</style>
Per definire il colore dell'outline di un elemento, possiamo utilizzare outline-color
.
Con questa proprietà, possiamo scegliere tra:
transparent
, per rendere l'outline trasparente.Ecco come rendere l'outline rosso:
<div>Ciao a tutti</div>
<style>
div {
width: 200px;
height: 200px;
outline-style: solid;
outline-width: 3px;
outline-color: red;
}
</style>
Con la proprietà outline
, è possibile specificare tutte le diverse proprietà che abbiamo visto finora in un unico passaggio. Ecco la sintassi di outline
:
outline:
outline-width outline-style outline-color
Ricorda che outline-style
è sempre obbligatorio, mentre lo spessore e il colore sono facoltativi.
Vediamo un esempio con un outline di 3px e rosso:
<div>Ciao a tutti</div>
<style>
div {
width: 200px;
height: 200px;
outline: 3px solid red;
}
</style>
La proprietà outline-offset
in CSS specifica la distanza tra l'outline e il bordo dell'elemento. Questa proprietà permette di spostare l'outline all'esterno dell'elemento (se usi valori positivi) o all'interno dell'elemento (se usi valori negativi).
La proprietà outline-offset
accetta qualsiasi valore di lunghezza: px, em, ecc.
<div>Ciao a tutti</div>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid black;
outline: 3px solid red;
outline-offset: 10px;
}
</style>
Nell'esempio, abbiamo inserito i bordi per evidenziare il confine dell'elemento.