Dekorácia textu - Triky CSS

Anonim

text-decorationVlastnosť Podčiarkne, overline, line-through, alebo kombináciu liniek do vybraného textu.

h3 ( text-decoration: underline; )

Hodnoty

  • none: nie je nakreslená žiadna čiara a všetky existujúce ozdoby sú odstránené.
  • underline: nakreslí čiaru 1px cez text na jeho základnej čiare.
  • line-through: nakreslí 1px čiaru cez text v jeho „strednom“ bode.
  • overline: nakreslí 1px čiaru cez text priamo nad jeho „horný“ bod.
  • inherit: dedí dekoráciu po rodičovi.

blinkHodnota je v W3C spec, ale to je zastaraný a nebude pracovať v žiadnom aktuálnom prehliadači. Keď to fungovalo, spôsobil to, že text „blikal“ rýchlym prepínaním medzi 0% a 100% nepriehľadnosťou.

Ukážka

Prečítajte si perá CSS-Tricks: Textové dekorácie od CSS-Tricks (@ css-tricks) na stránkach CodePen.

Poznámky k použitiu

Môžete kombinovať underline, overlinealebo line-throughhodnoty v zozname priestorovo oddelené, aby sa pridať viac dekorácie riadky:

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

V predvolenom nastavení riadok alebo riadky dedia farbu textu nastavenú jeho colorvlastnosťou. Môžete to zmeniť v prehľadávačoch, ktoré podporujú dané text-decoration-colorvlastníctvo, alebo vlastnosť skratky s tromi hodnotami.

text-decoration ako stenografický majetok

text-decorationmožno použiť v kombinácii s text-decoration-stylea text-decoration-colorako skratkovú vlastnosť:

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

Túto predponu momentálne podporuje iba Firefox. Safari to podporuje -webkitpredponou. Prehliadač Chrome tiež vyžaduje -webkitpredponu a experimentálne funkcie webovej platformy povolené v príznakoch prehliadača Chrome.

Súvisiace

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

Viac informácií

  • textová výzdoba ako vlastnosť skratky v špecifikácii W3C CSS Text Decoration Module Level 3 CR
  • dekorácia textu na MDN

Podpora prehľadávača

Všetky prehľadávače podporujú vlastnosť „longhand“ CSS2.1 text-decoration. Vlastnosť skrátený a čiastkové vlastnosti text-decoration-color, text-decoration-linea text-decoration-stylesú podporované unprefixed vo Firefoxe, a s -webkitpredponou v Safari. Chrome tieto hodnoty rozpozná aj s -webkitpovolenou predponou a príznakom Experimentálne webové platformy.

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.

Desktop

Chrome Firefox IE Hrana Safari
91 87 Nie 88 TP

Mobil / tablet

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

* text-decorationplne podporované, čiastkové vlastnosti podporované -webkitpredponou.
† podvlastnosti navyše vyžadujú povolený príznak experimentálnych funkcií webovej platformy.
‡ Iba CSS2.1 text-decoration; podvlastnosti nie sú podporované.