The text-decoration-thicknessharta di CSS menetapkan ketebalan strok barisan hiasan yang digunakan pada teks dalam unsur. The text-decoration-linekeperluan nilai kepada sama ada underline, line-throughatau overlineuntuk mencerminkan hartanah ketebalan.
.text ( text-decoration-line: underline; text-decoration-thickness: 2px; )Sintaks
auto | from-font | | Nilai
auto: (Default) Membolehkan penyemak imbas menentukan ketebalan yang sesuai untuk garis hiasan teks.from-font: Sekiranya fon pertama yang tersedia mempunyai metrik yang menentukan ketebalan yang disukai, ia menggunakan ketebalan itu; jika tidak, ia berkelakuan seperti nilai automatik.: Mana-mana panjang yang sah dengan unit menentukan ketebalan garis hiasan teks sebagai panjang tetap. Ini menggantikan sebarang maklumat dalam fon dan penyemak imbas lalai.percentage: Menentukan ketebalan garis hiasan teks sebagai peratusan 1em pada fon elemen.initial: Tetapan lalai harta yang automatik.inherit: Mengamalkan nilai ketebalan hiasan ibu bapa.unset: Mengeluarkan ketebalan arus dari elemen.
Demo
Ubah nilai text-decoration-thicknessdalam demo berikut untuk melihat bagaimana harta itu mempengaruhi hiasan teks elemen:
Ia tetap untuk keturunan
Setelah menetapkan hiasan untuk elemen, semua anaknya juga akan mendapat hiasan itu. Sekarang bayangkan kita mahu mengubah ketebalan hiasan untuk salah satu kanak-kanak:
p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; )
p span ( text-decoration-thickness: 0.1em; /* Doesn't work */ )Ini tidak berfungsi kerana ketebalan hiasan yang ditentukan oleh unsur nenek moyang tidak boleh ditolak. Agar ini berfungsi, kekhususan hiasan perlu ditetapkan untuk elemen itu sendiri:
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! */ )Peratusan dan lata
Untuk harta ini, panjang akan diwarisi sebagai nilai tetap, dan tidak akan ditimbang dengan fon. Sebaliknya, peratusan akan diwarisi sebagai nilai relatif dan, oleh itu, skala dengan perubahan fon seperti yang diwarisi.
p ( text-decoration-thickness: 20%; )
p span ( font-size: 20px; text-decoration-line: underline; text-decoration-thickness: inherit; /* = 20% */ )Demo berikut menunjukkan perbandingan antara menggunakan nilai em dan peratusan dalam hal pewarisan dan, seperti yang anda lihat, di sebelah kiri (di mana kita menggunakan em) nilai yang diwarisi adalah panjang tetap. Itu bererti tidak sesuai dengan perubahan fon. Walau bagaimanapun, di sebelah kanan teks mewarisi nilai relatif (dalam kes ini 20%); oleh itu ketebalannya bersesuaian dengan perubahan fon.
Walaupun draf kerja spesifikasi ini merujuk kepada nilai peratusan text-decoration-thickness, sokongan sebenarnya terhad kepada Firefox.
Menggunakan dengan text-decoration
Draf kerja Modul Hiasan Teks CSS Tahap 4 termasuk text-decoration-thicknesssebagai nilai dalam text-decorationharta tanah.
.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; )Walaupun text-decorationdisokong dengan baik, sokongan untuk penyertaan text-decoration-thicknesskini terhad kepada Firefox.
Sokongan penyemak imbas
| Ciri | IE | Hujung | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|---|
| Harta tanah | Tidak | Tidak | 70 | Tidak | 12.1 | Tidak |
| Peratusan | Tidak | Tidak | 76 | Tidak | Tidak | Tidak |
| Shorthand | Tidak | Tidak | 70 | Tidak | Tidak | Tidak |
| Ciri | Android Chrome | Android Firefox | Penyemak Imbas Android | Safari iOS | Opera Mini |
|---|---|---|---|---|---|
| Harta tanah | Tidak | Tidak | Tidak | 12.2 | Tidak |
| Peratusan | Tidak | Tidak | Tidak | Tidak | Tidak |
| Shorthand | Tidak | Tidak | Tidak | Tidak | Tidak |
Catatan
- Harta tanah dulu dipanggil
text-decoration-width, tetapi dikemas kini dalam draf kerja 2019 spesifikasi Modul Hiasan Teks CSS Tahap 4. - Penyemak imbas mesti menggunakan ketebalan minimum 1 piksel peranti.