CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

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

text-decoration-style: solid | double | dotted | dashed | wavy;

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

CODE: CSSpreleva codice
  1. .style-example {
  2.   font-size: 22px;
  3.   text-decoration-line: underline;
  4.   text-decoration-thickness: 2px;
  5.   text-underline-offset: 4px;
  6.   margin-bottom: 10px;
  7. }
  8.  
  9. .solid {
  10.   text-decoration-style: solid;
  11. }
  12.  
  13. .double {
  14.   text-decoration-style: double;
  15. }
  16.  
  17. .dotted {
  18.   text-decoration-style: dotted;
  19. }
  20.  
  21. .dashed {
  22.   text-decoration-style: dashed;
  23. }
  24.  
  25. .wavy {
  26.   text-decoration-style: wavy;
  27. }

Contenuto Esempio: text-decoration-style

Esempio di utilizzo di text-decoration-style

In questo esempio vengono mostrati diversi stili di decorazione applicati al testo:


Linea solida
Linea doppia
Linea punteggiata
Linea tratteggiata
Linea ondulata

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

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies