text-decoration-thicknessĪpašums CSS nosaka insulta biezumu apdares līniju, kas tiek izmantots par teksta elementa. Šīs text-decoration-linevērtības ir jābūt vai nu underline, line-throughvai overlinelai atspoguļotu biezums īpašumu.
.text ( text-decoration-line: underline; text-decoration-thickness: 2px; )Sintakse
auto | from-font | | Vērtības
auto: (Noklusējums) Ļauj pārlūkprogrammai norādīt atbilstošu biezumu teksta apdares līnijai.from-font: Ja pirmajam pieejamajam fontam ir metrika, kas norāda vēlamo biezumu, tas izmanto šo biezumu; pretējā gadījumā tas darbojas tāpat kā automātiskā vērtība.: Jebkurš derīgs garums ar mērvienību norāda teksta apdares līniju biezumu kā fiksētu garumu. Tas aizstāj visu fontu un pārlūka noklusējuma informāciju.percentage: Norāda teksta apdares līniju biezumu kā 1em elementa fontā.initial: Rekvizīta noklusējuma iestatījums, kas ir automātisks.inherit: Pieņem vecāku apdares biezuma vērtību.unset: Noņem elementa pašreizējo biezumu.
Demonstrācija
Mainiet šī text-decoration-thicknessdemonstrācijas vērtību, lai redzētu, kā rekvizīts ietekmē elementa teksta apdari:
Pēcnācējiem tas ir nemainīgs
Pēc elementa rotājuma iestatīšanas arī visiem tā bērniem būs šī dekorācija. Tagad iedomājieties, ka mēs vēlamies mainīt rotājuma biezumu vienam no bērniem:
p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; )
p span ( text-decoration-thickness: 0.1em; /* Doesn't work */ )Tas nedarbojas, jo priekšteča elementu norādīto apdares biezumu nevar ignorēt. Lai tas darbotos, pašam elementam jānosaka dekorēšanas specifika:
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! */ )Procenti un kaskāde
Šim īpašumam garums tiks mantots kā fiksēta vērtība, un tas netiks mērogots ar fontu. No otras puses, procenti tiks mantoti kā relatīva vērtība, un tāpēc tie tiks mērogoti, mainoties fonta izmaiņām.
p ( text-decoration-thickness: 20%; )
p span ( font-size: 20px; text-decoration-line: underline; text-decoration-thickness: inherit; /* = 20% */ )Šis demo parāda salīdzinājumu starp em un procentuālo vērtību izmantošanu mantojuma gadījumā, un, kā redzat, kreisajā pusē (kurā mēs izmantojam em) mantotā vērtība ir fiksēts garums. Tas nozīmē, ka tas nav mērogojams ar fonta izmaiņām. Labajā pusē teksts tomēr pārmanto relatīvu vērtību (šajā gadījumā 20%); tāpēc biezums mainās ar fonta izmaiņām.
Lai gan pašreizējais specifikācijas darba projekts norāda procentuālās vērtības text-decoration-thickness, faktiskais atbalsts pašlaik ir ierobežots ar Firefox.
Izmantojot ar text-decoration
Pašreizējā CSS teksta apdares moduļa 4. līmeņa specifikācijas darba melnraksta text-decoration-thicknessvērtība kā vērtība ir iekļauta text-decoration.
.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; )Lai gan tas text-decorationir labi atbalstīts, atbalsts iekļaušanai text-decoration-thicknesspašlaik ir ierobežots ar Firefox.
Pārlūkprogrammas atbalsts
| Funkcija | IE | Mala | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|---|
| Īpašums | Nē | Nē | 70 | Nē | 12.1 | Nē |
| Procenti | Nē | Nē | 76 | Nē | Nē | Nē |
| Stenogrāfija | Nē | Nē | 70 | Nē | Nē | Nē |
| Funkcija | Android Chrome | Android Firefox | Android pārlūks | iOS Safari | Opera Mini |
|---|---|---|---|---|---|
| Īpašums | Nē | Nē | Nē | 12.2 | Nē |
| Procenti | Nē | Nē | Nē | Nē | Nē |
| Stenogrāfija | Nē | Nē | Nē | Nē | Nē |
Piezīmes
text-decoration-widthAgrāk tika izsaukts īpašums , taču tas tika atjaunināts CSS teksta apdares moduļa 4. līmeņa specifikācijas 2019. gada darba projektā.- Pārlūkprogrammai ir jāizmanto vismaz 1 ierīces pikseļa biezums.