CSS text-decoration-style
La proprietà CSS3 text-decoration-style definisce lo stile visivo della decorazione del testo
La proprietà text-decoration-style determina l'aspetto grafico della decorazione testuale, come sottolineature o barrature. Gli stili disponibili includono solido, doppio, punteggiato, tratteggiato e ondulato, offrendo così maggiore flessibilità estetica nel design del testo.
Sintassi
Significato dei valori principali:
solid: Linea continua (predefinita).
double: Doppia linea parallela.
dotted: Linea punteggiata.
dashed: Linea tratteggiata.
wavy: Linea ondulata (effetto 'onda').
Esempio proprietà: text-decoration-style
Codice Esempio: text-decoration-style
.style-example {
font-size: 22px;
text-decoration-line: underline;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
margin-bottom: 10px;
}.solid {
text-decoration-style: solid;
}.double {
text-decoration-style: double;
}.dotted {
text-decoration-style: dotted;
}.dashed {
text-decoration-style: dashed;
}.wavy {
text-decoration-style: wavy;
}
Contenuto Esempio: text-decoration-style
Esempio di utilizzo di text-decoration-style
In questo esempio vengono mostrati diversi stili di decorazione applicati al testo:
CSS e HTML per text-decoration-style:
<style>
.style-example {
font-size: 22px;
text-decoration-line: underline;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
margin-bottom: 10px;
}
.solid {
text-decoration-style: solid;
}
.double {
text-decoration-style: double;
}
.dotted {
text-decoration-style: dotted;
}
.dashed {
text-decoration-style: dashed;
}
.wavy {
text-decoration-style: wavy;
}
</style>
<div class="style-example solid">Linea solida</div>
<div class="style-example double">Linea doppia</div>
<div class="style-example dotted">Linea punteggiata</div>
<div class="style-example dashed">Linea tratteggiata</div>
<div class="style-example wavy">Linea ondulata</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.192
