CSS outline
La proprietà CSS outline imposta un contorno attorno all'elemento (CSS3)
La proprietà outline permette di definire in una singola dichiarazione il colore, lo stile e la larghezza del contorno esterno di un elemento. A differenza dei bordi, il contorno non influisce sulla posizione degli altri elementi e può risultare utile per evidenziare elementi al focus.
Sintassi
Significato dei valori principali:
-
outline-color: definisce il colore del contorno. Accetta valori di colore CSS validi come
red,#ff0000,rgb(255,0,0), ecc. -
outline-style: definisce lo stile del contorno. Valori comuni:
solid,dashed,dotted,double,none. -
outline-width: definisce la larghezza del contorno. Può essere specificata in
px,em,rem, ecc., oppure usare parole chiave comethin,medium,thick.
Esempio proprietà: outline
Codice Esempio: outline
.outline-example {
width: 300px;
height: 150px;
outline: 4px dashed #007acc; /* Outline blu tratteggiato */
padding: 20px;
background-color: #f0f0f0;
font-size: 18px;
text-align: center;
border-radius: 8px;
color: #333;
}
Contenuto Esempio: outline
Esempio di utilizzo di outline
In questo esempio, la proprietà outline viene usata per creare un contorno blu tratteggiato attorno a un elemento con bordo rosso.
CSS e HTML per l'elemento con contorno:
<style>
.outline-example {
width: 300px;
height: 150px;
outline: 4px dashed #007acc; /* Outline blu tratteggiato */
border: 4px solid red; /* Bordo rosso */
padding: 20px;
background-color: #ffff;
font-size: 18px;
text-align: center;
border-radius: 8px;
color: #333;
}
</style>
<div class="outline-example">
Elemento con contorno (outline) visibile
</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: 18.97.14.88
