CSS outline-offset
La proprietà CSS outline-offset definisce la distanza del contorno dall’elemento (CSS3)
La proprietà outline-offset consente di controllare la distanza tra il bordo dell'elemento e il contorno (outline). Utile per migliorare la visibilità del contorno senza modificare il contenuto o il layout, specialmente nei casi di accessibilità e focus visivo.
Sintassi
Significato dei valori principali:
-
length: rappresenta la distanza tra il bordo dell'elemento e il contorno. Può essere espresso in unità come
px,em,rem, ecc. Un valore positivo sposta il contorno verso l’esterno, mentre uno negativo lo porta verso l’interno.
Esempio proprietà: outline-offset
Codice Esempio: outline-offset
.outline-offset-example {
width: 300px;
height: 150px;
outline: 3px solid #007acc;
outline-offset: 10px;
padding: 20px;
background-color: #ffffff;
font-size: 18px;
text-align: center;
border: 2px solid #ddd;
border-radius: 8px;
color: #333;
}
Contenuto Esempio: outline-offset
Esempio di utilizzo di outline-offset
In questo esempio, la proprietà outline-offset viene utilizzata per distanziare il contorno dall’elemento:
CSS e HTML per il contorno distanziato:
<style>
.outline-offset-example {
width: 300px;
height: 150px;
outline: 3px solid #007acc;
outline-offset: 10px; /* Sposta il contorno di 10px verso l’esterno */
padding: 20px;
background-color: #ffffff;
font-size: 18px;
text-align: center;
border: 2px solid #ddd;
border-radius: 8px;
color: #333;
}
</style>
<div class="outline-offset-example">
Contorno distanziato con outline-offset
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.118
