Testo-decorazione - Trucchi CSS

Anonim

La text-decorationproprietà aggiunge una sottolineatura, una sovratensione, una riga o una combinazione di righe al testo selezionato.

h3 ( text-decoration: underline; )

Valori

  • none: non viene tracciata alcuna linea e viene rimossa qualsiasi decorazione esistente.
  • underline: disegna una linea di 1 pixel attraverso il testo alla sua linea di base.
  • line-through: disegna una linea di 1 pixel attraverso il testo nel punto "medio".
  • overline: disegna una linea di 1 pixel attraverso il testo, direttamente sopra il suo punto "superiore".
  • inherit: eredita la decorazione del genitore.

Il blinkvalore è nelle specifiche W3C, ma è deprecato e non funzionerà in nessun browser corrente. Quando ha funzionato, ha fatto sembrare il testo "lampeggiare" spostandolo rapidamente tra 0% e 100% di opacità.

Demo

Vedi Pen CSS-Tricks: Text Decoration di CSS-Tricks (@ css-tricks) su CodePen.

Note sull'utilizzo

È possibile combinare i underline, overlineo line-throughvalori in un elenco separato da spazi di aggiungere più linee di decorazione:

p ( text-decoration: overline underline line-through; )

Per impostazione predefinita, la riga o le righe ereditano il colore del testo come impostato dalla sua colorproprietà. Puoi modificare questa impostazione nei browser che supportano la text-decoration-colorproprietà o la proprietà abbreviata a tre valori.

text-decoration come proprietà di stenografia

text-decorationpuò essere utilizzato in combinazione con text-decoration-stylee text-decoration-colorcome proprietà abbreviata:

.fancy-underline ( text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; /* can be shortened to */ text-decoration: underline wavy red; )

Attualmente solo Firefox lo supporta senza prefisso. Safari lo supporta con il -webkitprefisso. Chrome richiede anche il -webkitprefisso e le funzionalità della piattaforma web sperimentale abilitate nei flag di Chrome.

Relazionato

  • text-decoration-color
  • text-decoration-line
  • text-decoration-style
  • text-decoration-skip

Maggiori informazioni

  • text-decoration come proprietà abbreviata nella specifica W3C CSS Text Decoration Module Level 3 CR
  • text-decoration presso MDN

Supporto browser

Tutti i browser supportano la proprietà CSS2.1 "longhand" text-decoration. La proprietà stenografia e le sotto-proprietà text-decoration-color, text-decoration-linee text-decoration-stylesono supportati senza prefisso in Firefox, e con il -webkitprefisso in Safari. Chrome riconoscerà anche quei valori con il -webkitprefisso e il flag di piattaforme web sperimentali abilitati.

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.

Desktop

Cromo Firefox IE Bordo Safari
91 87 No 88 TP

Mobile / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 14,0-14,4 *

* text-decorationcompletamente supportato, proprietà secondarie supportate con -webkitprefisso.
† le proprietà secondarie richiedono inoltre l'attivazione del flag delle funzionalità della piattaforma web sperimentale.
‡ text-decorationSolo CSS2.1 ; proprietà secondarie non supportate.