Tekstin koristelu - CSS-temppuja

Anonim

text-decorationOminaisuus lisää alleviivaus, overline, linja-kautta, tai yhdistelmä riviä valitun tekstin.

h3 ( text-decoration: underline; )

Arvot

  • none: viivaa ei piirretä ja kaikki olemassa olevat koristeet poistetaan.
  • underline: piirtää 1 kuvapisteen viivan tekstin yli sen perusviivalla.
  • line-through: piirtää 1 kuvapisteen viivan tekstin yli keskikohtaan.
  • overline: piirtää 1 kuvapisteen viivan tekstin yli, suoraan sen yläpisteen yläpuolelle.
  • inherit: perii vanhemman koristelun.

blinkArvo on W3C spec, mutta se on vanhentunut, ja se toimi missään nykyisessä selaimessa. Kun se toimi, se sai tekstin näyttämään "vilkkuvalta" vaihtamalla sen nopeasti 0%: n ja 100%: n peittävyyden välillä.

Demo

Katso Kynä CSS-Tricks: CSS-Tricksin tekstikoristelu (@ css-tricks) CodePenillä.

Käyttöohjeet

Voit yhdistää underline, overlinetai line-througharvoja eroteltuja lista lisätä useita koristeluun rivit:

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

Oletusarvoisesti rivi tai rivit perivät tekstin värin sen colorominaisuuden mukaan. Voit muuttaa tätä selaimissa, jotka tukevat text-decoration-colorominaisuutta tai kolmiarvoista lyhytominaisuutta.

text-decoration lyhytomaisuutena

text-decorationvoidaan käyttää yhdessä text-decoration-styleja text-decoration-colorlyhytominaisuuden kanssa:

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

Tällä hetkellä vain Firefox tukee tätä korjaamatonta tiedostoa. Safari tukee sitä -webkitetuliitteellä. Chrome tarvitsee myös -webkitetuliitteen ja kokeelliset verkkoalustan ominaisuudet, jotka on otettu käyttöön Chrome-lipuissa.

Liittyvät

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

Lisää tietoa

  • tekstikoristelu lyhytominaisuutena W3C spec CSS -tekstikoristemoduulissa, taso 3 CR
  • tekstikoristelu MDN: ssä

Selaimen tuki

Kaikki selaimet tukevat CSS2.1 “longhand” -ominaisuutta text-decoration. Pika omaisuutta ja osa-ominaisuuksia text-decoration-color, text-decoration-lineja text-decoration-styletuetaan unprefixed Firefoxissa ja jossa -webkitetuliite Safarissa. Chrome tunnistaa myös nämä arvot, kun -webkitetuliite ja kokeelliset Web-alustat-lippu ovat käytössä.

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.

Työpöytä

Kromi Firefox IE Reuna Safari
91 87 Ei 88 TP

Matkapuhelin / tabletti

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

* text-decorationtäysin tuettu, aliominaisuuksia tuetaan -webkitetuliitteellä.
† aliominaisuudet edellyttävät lisäksi kokeellisia verkkofoorumin ominaisuuksia.
Only text-decorationvain CSS2.1 ; aliominaisuuksia ei tueta.