text-decorationProprietatea adaugă o subliniere, overline, Tăiat sau o combinație de linii de text selectat.
h3 ( text-decoration: underline; )Valori
none: nu este trasată nicio linie și orice decorație existentă este eliminată.underline: trasează o linie de 1 px pe text la linia de bază.line-through: trasează o linie de 1 px de-a lungul textului în punctul său „de mijloc”.overline: trasează o linie de 1 px peste text, direct deasupra punctului său „de sus”.inherit: moștenește decorul părintelui.
blinkValoarea este în spec W3C, dar este învechită și nu va funcționa în orice browser curent. Când a funcționat, a făcut ca textul să pară „clipi”, trecând rapid între 0% și 100% opacitate.
Demo
Vedeți Pen CSS-Tricks: Text Decoration by CSS-Tricks (@ css-tricks) pe CodePen.
Note de utilizare
Puteți combina underline, overlinesau line-throughvalorile dintr - o listă separată cu spațiu pentru a adăuga mai multe linii de decor:
p ( text-decoration: overline underline line-through; )În mod implicit, linia sau liniile moștenesc culoarea textului așa cum este setată de colorproprietatea sa . Puteți schimba acest lucru în browserele care acceptă text-decoration-colorproprietatea sau proprietatea de stenogramă cu trei valori.
text-decoration ca proprietate de stenografie
text-decorationpoate fi utilizat în combinație cu text-decoration-styleși text-decoration-colorca proprietate de stenogramă:
.fancy-underline ( text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; /* can be shortened to */ text-decoration: underline wavy red; )În prezent, numai Firefox acceptă acest neprefixat. Safari îl acceptă cu -webkitprefixul. Chrome are nevoie, de asemenea, de -webkitprefix și de funcțiile experimentale ale platformei web activate în steagurile Chrome.
Legate de
text-decoration-colortext-decoration-linetext-decoration-styletext-decoration-skip
Mai multe informatii
- decorarea textului ca proprietate de prescurtare în specificația W3C CSS Modul de decorare a textului Nivelul 3 CR
- decorare text la MDN
Suport pentru browser
Toate browserele acceptă proprietatea „longhand” CSS2.1 text-decoration. Proprietatea de scurtare și sub-proprietățile text-decoration-color, text-decoration-lineși text-decoration-stylesunt acceptate neprefixate în Firefox și cu -webkitprefixul în Safari. Chrome va recunoaște, de asemenea, acele valori cu -webkitprefixul și semnalizatorul Platformelor web experimentale activate.
Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.
Desktop
| Crom | Firefox | IE | Margine | Safari |
|---|---|---|---|---|
| 91 | 87 | Nu | 88 | TP |
Mobil / Tabletă
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 * |
* text-decorationcomplet acceptat, sub-proprietăți acceptate cu -webkitprefix.
† sub-proprietățile necesită suplimentar activarea semnalizării caracteristicilor platformei web.
‡ text-decorationnumai CSS2.1 ; sub-proprietăți nu sunt acceptate.