CSS outline-style
La proprietà CSS outline-style definisce lo stile del contorno (CSS3)
La proprietà outline-style specifica come viene disegnato il contorno attorno a un elemento. Deve essere impostata affinché l’outline sia visibile, anche se vengono definiti colore e larghezza. I valori disponibili permettono di ottenere effetti visivi diversi, dal semplice bordo continuo a stili decorativi 3D.
Sintassi
Significato dei valori principali:
none: nessun contorno viene disegnato.
solid: contorno a linea piena (continuo).
dashed: contorno tratteggiato.
dotted: contorno punteggiato.
double: due linee parallele.
groove: sembra incavato, effetto 3D.
ridge: sembra in rilievo, effetto 3D opposto a
groove.inset: contorno che sembra essere inserito nel contenuto.
outset: contorno che sembra uscire fuori dal contenuto.
Esempio proprietà: outline-style
Codice Esempio: outline-style
.outline-style-example {
width: 300px;
height: 150px;
outline-width: 4px;
outline-style: dashed;
outline-color: #e91e63;
padding: 20px;
background-color: #fefefe;
font-size: 18px;
text-align: center;
border-radius: 6px;
color: #333;
}
Contenuto Esempio: outline-style
Esempio di utilizzo di outline-style
In questo esempio, la proprietà outline-style viene usata per definire un contorno tratteggiato attorno all'elemento:
CSS e HTML per il contorno con stile personalizzato:
<style>
.outline-style-example {
width: 300px;
height: 150px;
outline-width: 4px;
outline-style: dashed;
outline-color: #e91e63;
padding: 20px;
background-color: #fefefe;
font-size: 18px;
text-align: center;
border-radius: 6px;
color: #333;
}
</style>
<div class="outline-style-example">
Contorno con stile tratteggiato
</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
