Szövegdíszítés - CSS-trükkök

Anonim

A text-decorationtulajdonság aláhúzást, overline-t, line-through-t vagy vonalkombinációt ad a kijelölt szöveghez.

h3 ( text-decoration: underline; )

Értékek

  • none: nem rajzolunk vonalat, és a meglévő díszeket eltávolítjuk.
  • underline: 1px vonalat rajzol a szövegre az alapvonalán.
  • line-through: 1 képpontos vonalat rajzol a szöveg közepére.
  • overline: 1px vonalat rajzol a szövegre, közvetlenül a „felső” pont fölé.
  • inherit: örökli a szülő dekorációját.

Az blinkérték a W3C specifikációban van, de elavult, és egyetlen jelenlegi böngészőben sem fog működni. Amikor működött, a szöveg úgy tűnik, hogy „villog”, ha gyorsan átkapcsolja 0% és 100% átlátszatlanság között.

Demó

Lásd a Toll CSS-trükkök: Szövegdekoráció CSS-trükkökkel (@ css-tricks) a CodePen-en.

Használati megjegyzések

Kombinálhatja a underline, overlinevagy az line-throughértékeket egy szóközzel elválasztott listában, hogy több díszítési sort adjon hozzá:

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

Alapértelmezés szerint a sor vagy vonalak örökölik a szöveg színét, amelyet a colortulajdonsága határoz meg . Ezt megváltoztathatja olyan böngészőkben, amelyek támogatják a text-decoration-colortulajdonságot vagy a háromértékű gyorsírás tulajdonságot.

text-decoration mint gyorsírási ingatlan

text-decorationrövidítéssel együtt text-decoration-styleés text-decoration-colorgyorsírásként is használható :

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

Jelenleg csak a Firefox támogatja ezt az előre nem javítottat. A Safari az -webkitelőtaggal támogatja . A Chrome-nak szüksége van a -webkitChrome zászlókban engedélyezett előtagra és kísérleti webplatform-funkciókra is.

Összefüggő

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

Több információ

  • a szövegdekoráció gyorsírásként a W3C spec CSS szövegdekorációs modul CR 3. szintű moduljában
  • szövegdíszítés az MDN-nél

Böngésző támogatás

Minden böngésző támogatja a CSS2.1 „longhand” tulajdonságot text-decoration. A rövid tulajdonság, és az al-tulajdonságokkal text-decoration-color, text-decoration-lineés text-decoration-styletámogatja előtag nélküli Firefox, és a -webkitelőtag a Safari. A Chrome ezeket az értékeket is felismeri, ha az -webkitelőtag és a Kísérleti webplatformok jelző engedélyezve van.

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.

Asztal

Króm Firefox AZAZ Él Szafari
91. 87 Nem 88 TP

Mobil / Tablet

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

* text-decorationteljesen támogatott, -webkitelőtagokkal támogatott altulajdonságok.
† altulajdonságok emellett kísérleti webplatform-funkciókat is engedélyeznek.
Only text-decorationcsak a CSS2.1 ; altulajdonságok nem támogatottak.