A text-decoration-thicknessCSS tulajdonság megadja az elem szövegénél használt díszvonal vonalvastagságát. Az text-decoration-lineérték kell lennie sem underline, line-throughvagy overlinehogy tükrözze a vastagság tulajdonság.
.text ( text-decoration-line: underline; text-decoration-thickness: 2px; )Szintaxis
auto | from-font | | Értékek
auto: (Alapértelmezés) Lehetővé teszi a böngésző számára, hogy megadja a megfelelő vastagságot a szöveg díszítési sorához.from-font: Ha az első elérhető betűtípus olyan metrikákkal rendelkezik, amelyek megadják az előnyös vastagságot, akkor ezt a vastagságot használja; különben úgy viselkedik, mint az automatikus érték.: Bármely érvényes egységnyi hossz megadja a szövegdíszítési vonalak vastagságát rögzített hosszúságként. Ez helyettesíti a betűtípusban és a böngésző alapértelmezett információit.percentage: Megadja a szövegdíszítés sorainak vastagságát 1em százalékban az elem betűtípusában.initial: A tulajdonság alapértelmezett beállítása, amely automatikus.inherit: Elfogadja a szülő díszítés vastagságának értékét.unset: Eltávolítja az elem vastagságát.
Demó
Módosítsa a text-decoration-thicknesskövetkező bemutató értékét, hogy lássa, hogyan befolyásolja a tulajdonság az elem szövegdekorációját:
A leszármazottak számára állandó
Miután díszletet állított be egy elemre, minden gyermeke is megkapja ezt a díszítést. Most képzelje el, hogy meg akarjuk változtatni az egyik gyermek díszítésének vastagságát:
p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; )
p span ( text-decoration-thickness: 0.1em; /* Doesn't work */ )Ez nem működik, mert az ősök által megadott díszítési vastagság nem írható felül. Ahhoz, hogy ez működjön, magának az elemnek dekorációs sajátosságot kell beállítani:
p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; ) p span ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.1em; /* It works! */ )Százalék és a kaszkád
Ennél a tulajdonságnál a hosszúság rögzített értékként öröklődik, és nem méretezhető a betűkészlettel. Másrészt a százalékos érték relatív értékként öröklődik, és ezért a betűkészlet változásaival skálázódik.
p ( text-decoration-thickness: 20%; )
p span ( font-size: 20px; text-decoration-line: underline; text-decoration-thickness: inherit; /* = 20% */ )A következő bemutató bemutatja az em és a százalékos értékek összehasonlítását öröklés esetén, és amint láthatja, a bal oldalon (amelyben em-t használunk) az öröklött érték fix hosszúságú. Ez azt jelenti, hogy nem méretezhető a betűtípus változásával. A jobb oldalon a szöveg azonban relatív értéket örököl (ebben az esetben 20%); ezért a vastagság a betűtípus változásával skálázódik.
Míg a specifikáció jelenlegi munkapéldánya a százalékos értékekre hivatkozik text-decoration-thickness, a tényleges támogatás jelenleg a Firefoxra korlátozódik.
A text-decoration
A CSS 4. szintű szövegdekorációs modul 4. szintű specifikációjának jelenlegi munkadokumentuma text-decoration-thicknessértékként tartalmazza a text-decorationgyorsírás tulajdonságot.
.link ( text-decoration: underline solid green 1px; )
/* The longhand equivalent */ .link ( text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: green, text-decoration-thickness: 1px; )Bár text-decorationjól támogatott, a beépítésének támogatása text-decoration-thicknessjelenleg a Firefoxra korlátozódik.
Böngésző támogatás
| Funkció | AZAZ | Él | Firefox | Króm | Szafari | Opera |
|---|---|---|---|---|---|---|
| Ingatlan | Nem | Nem | 70 | Nem | 12.1 | Nem |
| Százalékok | Nem | Nem | 76 | Nem | Nem | Nem |
| Gyorsírás | Nem | Nem | 70 | Nem | Nem | Nem |
| Funkció | Android Chrome | Android Firefox | Android böngésző | iOS Safari | Opera Mini |
|---|---|---|---|---|---|
| Ingatlan | Nem | Nem | Nem | 12.2 | Nem |
| Százalékok | Nem | Nem | Nem | Nem | Nem |
| Gyorsírás | Nem | Nem | Nem | Nem | Nem |
Megjegyzések
- Az ingatlant korábban hívták
text-decoration-width, de a CSS szövegdekorációs modul 4. szintű specifikációjának 2019. évi munkadokumentumában frissítették. - A böngészőnek legalább 1 eszköz pixel vastagságot kell használnia.