Textová dekorace - Triky CSS

Anonim

text-decorationVlastnost Podtrhne, overline, line-through, nebo kombinaci linek do vybraného textu.

h3 ( text-decoration: underline; )

Hodnoty

  • none: není nakreslena žádná čára a veškerá stávající dekorace je odstraněna.
  • underline: nakreslí 1px čáru přes text na jeho základní linii.
  • line-through: nakreslí 1px čáru přes text v jeho „středním“ bodě.
  • overline: nakreslí 1px čáru přes text přímo nad jeho „horní“ bod.
  • inherit: zdědí výzdobu rodiče.

blinkHodnota je v W3C spec, ale to je zastaralý a nebude pracovat v žádném aktuálním prohlížeči. Když to fungovalo, způsobilo to, že text „blikal“ rychlým přepínáním mezi 0% a 100% neprůhledností.

Ukázka

Podívejte se na pera CSS-Tricks: Textové dekorace CSS-Tricks (@ css-tricks) na CodePen.

Poznámky k použití

Můžete kombinovat underline, overlinenebo line-throughhodnoty v seznamu prostorově odděleny, aby se přidat více dekorace řádky:

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

Ve výchozím nastavení řádek nebo řádky zdědí barvu textu nastavenou jeho colorvlastností. Toto můžete změnit v prohlížečích, které tuto text-decoration-colorvlastnost podporují, nebo vlastnost zkratky se třemi hodnotami.

text-decoration jako zkratková vlastnost

text-decorationlze použít v kombinaci s text-decoration-stylea text-decoration-colorjako zkratkovou vlastnost:

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

V současné době to podporuje pouze Firefox. Safari to podporuje -webkitpředponou. Chrome také potřebuje -webkitpředponu a experimentální funkce webové platformy povolené ve vlajkách Chrome.

Příbuzný

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

Více informací

  • textová výzdoba jako vlastnost zkratky ve specifikaci CS3 Textový dekorační modul CSS úrovně 3 CR
  • textová výzdoba na MDN

Podpora prohlížeče

Všechny prohlížeče podporují vlastnost „longhand“ CSS2.1 text-decoration. Vlastnost zkratky a dílčí vlastnosti text-decoration-color, text-decoration-linea text-decoration-stylejsou podporovány bez předpony ve Firefoxu a s -webkitpředponou v Safari. Chrome také rozpozná tyto hodnoty s -webkitpovolenou předponou a příznakem Experimentální webové platformy.

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.

plocha počítače

Chrome Firefox TJ Okraj Safari
91 87 Ne 88 TP

Mobilní / Tablet

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

* text-decorationplně podporováno, dílčí vlastnosti podporovány -webkitpředponou.
† dílčí vlastnosti navíc vyžadují povolený příznak experimentálních funkcí webové platformy.
‡ text-decorationPouze CSS2.1 ; dílčí vlastnosti nejsou podporovány.