Proprietà text-decoration-style
La proprietà text-decoration-style cambia
il tipo di linea per il testo: linea singola, doppia,
a punti, a trattini, linea ondulata.
La proprietà dovrebbe essere utilizzata insieme alle
proprietà text-decoration-line
e text-decoration-color.
Queste proprietà estendono l'azione della proprietà
text-decoration,
essendo analoghi più avanzati.
Sintassi
selettore {
text-decoration-line: solid | double | dotted | dashed | wavy;
}
Valori
| Valore | Descrizione |
|---|---|
solid |
Linea continua. |
double |
Linea doppia. |
dotted |
Linea a punti. |
dashed |
Linea a trattini. |
wavy |
Linea ondulata. |
Valore predefinito: solid.
Esempio . Valore wavy
Ora il testo diventerà sottolineato con una linea ondulata rossa:
<div id="elem">
Lorem ipsum dolor sit amet.
</div>
#elem {
text-decoration-style: wavy;
text-decoration-color: red;
text-decoration-line: underline;
}
:
Esempio . Valore dotted
Ora il testo diventerà sottolineato con una linea a punti rossa:
<div id="elem">
Lorem ipsum dolor sit amet.
</div>
#elem {
text-decoration-style: dotted;
text-decoration-color: red;
text-decoration-line: underline;
}
:
Esempio . Valore double
Ora il testo diventerà barrato con una linea doppia rossa:
<div id="elem">
Lorem ipsum dolor sit amet.
</div>
#elem {
text-decoration-style: double;
text-decoration-color: red;
text-decoration-line: line-through;
}
:
