Okrasitev besedila - CSS-triki

Anonim

text-decorationLastnina dodaja poudarjajo, overline, linija-through, ali kombinacijo linij do izbranega besedila.

h3 ( text-decoration: underline; )

Vrednote

  • none: črta ni narisana in vsa obstoječa dekoracija je odstranjena.
  • underline: v besedilu na osnovni črti nariše vrstico 1 px.
  • line-through: v besedilu na srednji točki nariše vrstico 1 px.
  • overline: po celotnem besedilu nariše vrstico 1 px, neposredno nad njegovo "zgornjo" točko.
  • inherit: podeduje okras starša.

blinkVrednost je v W3C spec, vendar je zastarela in ne bo deloval v vsakem trenutni brskalnik. Ko je delovalo, se je zdelo, da besedilo utripa s hitrim preklapljanjem med 0% in 100% motnostjo.

Demo

Glejte Pen CSS-Tricks: Okrasitev besedila s CSS-Tricks (@ css-tricks) na CodePen.

Opombe o uporabi

Lahko združujejo underline, overlineali line-throughvrednosti v prostorsko ločeni seznam dodati več dekoracijo linije:

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

Vrstica ali vrstice privzeto podedujejo barvo besedila, kot jo nastavi njegova colorlastnost. To lahko spremenite v brskalnikih, ki podpirajo text-decoration-colorlastnost ali okrajšavo s tremi vrednostmi.

text-decoration kot stenografska lastnina

text-decorationse lahko uporablja v kombinaciji text-decoration-stylein text-decoration-colorkot stenografska lastnost:

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

Trenutno to podpira samo Firefox. Safari jo podpira s -webkitpredpono. Chrome potrebuje tudi -webkitpredpono in poskusne funkcije spletne platforme, ki so omogočene v Chrome zastavah.

Sorodno

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

Več informacij

  • dekoracija besedila kot stenografska lastnost v modulu za okrasitev besedila CSS, specifikacija W3C, stopnja 3 CR
  • okrasitev besedila na MDN

Podpora za brskalnik

Vsi brskalniki podpirajo lastnost »dolgoročno« CSS2.1 text-decoration. Okrajšava in pod-lastnosti text-decoration-color, text-decoration-linein text-decoration-styleso podprte brez predpone v Firefoxu in s -webkitpredpono v Safariju. Chrome bo te vrednosti tudi prepoznal z -webkitomogočeno predpono in zastavico Experimental Web Platforms.

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.

Namizje

Chrome Firefox IE Rob Safari
91 87 Ne 88 TP

Mobilni / tablični računalnik

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

* v text-decorationceloti podprte, pod-lastnosti, podprte s -webkitpredpono.
† pod-lastnosti poleg tega zahtevajo omogočeno oznako funkcij eksperimentalne spletne platforme.
‡ text-decorationsamo CSS2.1 ; pod-lastnosti niso podprte.