Den text-decoration-thicknessegenskap i CSS inställer slag tjockleken av dekoration linje som används på text i ett element. De text-decoration-linevärde måste vara antingen underline, line-througheller overlineför att återspegla tjockleken egendom.
.text ( text-decoration-line: underline; text-decoration-thickness: 2px; )Syntax
auto | from-font | | Värden
auto: (Standard) Tillåter webbläsaren att ange lämplig tjocklek för textdekorationsraden.from-font: Om det första tillgängliga teckensnittet har mått som anger en föredragen tjocklek, använder den den tjockleken; annars fungerar det som det automatiska värdet.: Alla giltiga längder med en enhet anger tjockleken på textdekorationslinjer som en fast längd. Detta ersätter all information i teckensnittet och webbläsarens standard.percentage: Anger tjockleken på textdekorationslinjer i procent av 1 em i elementets teckensnitt.initial: Standardinställningen för egenskapen som är auto.inherit: Antar föräldrarnas dekorationstjockleksvärde.unset: Tar bort den aktuella tjockleken från elementet.
Demo
Ändra värdet i text-decoration-thicknessi följande demo för att se hur egenskapen påverkar elementets textdekoration:
Det är konstant för ättlingar
Efter att ha satt in en dekoration för ett element kommer alla dess barn att ha den dekorationen också. Föreställ dig nu att vi vill ändra tjockleken på dekorationen för ett av barnen:
p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; )
p span ( text-decoration-thickness: 0.1em; /* Doesn't work */ )Detta fungerar inte eftersom dekorationstjockleken som anges av förfäderelement inte kan åsidosättas. För att detta ska fungera måste en dekorationsspecificitet ställas in för själva elementet:
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! */ )Procentandel och kaskad
För den här egenskapen ärver en längd som ett fast värde och skalas inte med teckensnittet. Å andra sidan kommer en procentsats att ärva som ett relativt värde och därför skalas med ändringar i teckensnittet när det ärver.
p ( text-decoration-thickness: 20%; )
p span ( font-size: 20px; text-decoration-line: underline; text-decoration-thickness: inherit; /* = 20% */ )Följande demo visar jämförelsen mellan att använda em och procentvärden i fall av arv och, som du kan se, på vänster sida (där vi använder em) är det ärvda värdet en fast längd. Det betyder att den inte skala med förändringen i teckensnittet. På höger sida ärver dock texten ett relativt värde (i detta fall 20%). därför skalar tjockleken med förändringen i teckensnittet.
Medan det nuvarande arbetsutkastet för specifikationen refererar till procentvärden för text-decoration-thicknessär faktiskt stöd för närvarande begränsat till Firefox.
Använda med text-decoration
Det aktuella arbetsutkastet till CSS Text Decoration Module Level 4-specifikationen inkluderar text-decoration-thicknesssom ett värde i text-decorationstenografiegenskapen.
.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; )Även om det text-decorationstöds väl är stöd för införandet av för text-decoration-thicknessnärvarande begränsat till Firefox.
Webbläsarstöd
| Funktion | IE | Kant | Firefox | Krom | Safari | Opera |
|---|---|---|---|---|---|---|
| Fast egendom | Nej | Nej | 70 | Nej | 12.1 | Nej |
| Procentandelar | Nej | Nej | 76 | Nej | Nej | Nej |
| Stenografi | Nej | Nej | 70 | Nej | Nej | Nej |
| Funktion | Android Chrome | Android Firefox | Android-webbläsare | iOS Safari | Opera Mini |
|---|---|---|---|---|---|
| Fast egendom | Nej | Nej | Nej | 12.2 | Nej |
| Procentandelar | Nej | Nej | Nej | Nej | Nej |
| Stenografi | Nej | Nej | Nej | Nej | Nej |
Anteckningar
- Fastigheten brukade kallas
text-decoration-width, men uppdaterades i arbetsutkastet för 2019 av CSS Text Decoration Module Level 4-specifikationen. - Webbläsaren måste använda en minsta tjocklek på 1 enhetspixel.