Teksti kaunistamine - CSS-trikid

Anonim

text-decorationVara lisab joonitud, overline rida-through, või kombinatsiooni rida valitud teksti.

h3 ( text-decoration: underline; )

Väärtused

  • none: joont ei tõmmata ja kõik olemasolevad kaunistused eemaldatakse.
  • underline: joonistab 1px joone kogu teksti algjoonel.
  • line-through: joonistab 1px joone kogu teksti keskmisesse punkti.
  • overline: joonistab 1px joone kogu tekstile, otse selle ülemise punkti kohale.
  • inherit: pärib vanema kaunistuse.

blinkVäärtus on W3C spec, kuid see on aegunud ja ei tööta mingil praeguse brauseriga. Kui see toimis, pani see teksti vilkuma, muutes selle kiiresti läbipaistmatuse vahemikku 0–100%.

Demo

Vaadake CodePeni pliiatsi CS CS-Tricks pliiatsit CSS-Tricks (@ css-tricks).

Kasutusjuhised

Võite kombineerida underline, overlinevõi line-throughväärtuste tühikutega eraldatult lisada mitu kaunistamiseks read:

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

Vaikimisi pärib rida või read teksti värvi, mis on määratud selle coloratribuudiga. Saate seda muuta brauserites, mis toetavad text-decoration-coloratribuuti või kolme väärtusega lühikese omaduse omadust.

text-decoration kui lühikirjeldus

text-decorationvõib kasutada kombinatsioonis text-decoration-styleja text-decoration-colorlühendina vara:

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

Praegu toetab seda prefiksitut ainult Firefox. Safari toetab seda -webkiteesliitega. Chrome vajab -webkitka Chrome'i lippudes lubatud prefiksit ja katselisi veebiplatvormi funktsioone.

Seotud

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

Rohkem informatsiooni

  • teksti kaunistamine kui W3C spec CSS-i tekstikaunistamise mooduli 3. taseme CR-i lühikirjeldus
  • teksti kaunistamine MDN-is

Brauseri tugi

Kõik brauserid toetavad atribuuti CSS2.1 “longhand” text-decoration. Stenografisti vara ja sub-omadused text-decoration-color, text-decoration-linening text-decoration-styletoetab Eesliiteta Firefox ja koos -webkiteesliide Safari. Chrome tunneb need väärtused ära ka siis, kui on lubatud -webkitprefiks ja katseliste veebiplatvormide lipp.

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.

Töölaud

Chrome Firefox IE Edge Safari
91 87 Ei 88 TP

Mobiil / tahvelarvuti

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

* text-decorationtäielikult toetatud, alamomadused toetatud -webkiteesliitega.
† alaomadused nõuavad lisaks katseliste veebiplatvormide funktsioonide lipu lubamist.
Only text-decorationainult CSS2.1 ; alaomadusi ei toetata.