Hiasan teks - Trik CSS

Anonim

The text-decorationhartanah menambah satu garis bawah, overline, garis-melalui, atau gabungan garis untuk teks yang dipilih.

h3 ( text-decoration: underline; )

Nilai

  • none: tidak ada garis yang dilukis, dan hiasan yang ada dikeluarkan.
  • underline: melukis garis 1px melintasi teks pada asasnya.
  • line-through: menarik garis 1px melintasi teks pada titik "tengah".
  • overline: menarik garis 1px di seluruh teks, tepat di atas titik "teratas".
  • inherit: mewarisi hiasan ibu bapa.

Yang blinknilai di spec W3C, tetapi ia tidak lagi digunakan dan tidak akan bekerja di mana-mana pelayar semasa. Ketika bekerja, teks itu kelihatan "berkedip" dengan cepat menukarnya antara 0% dan 100% kelegapan.

Demo

Lihat Pen CSS-Tricks: Text Decoration by CSS-Tricks (@ css-tricks) di CodePen.

Nota Penggunaan

Anda boleh menggabungkan underline, overlineatau line-throughnilai dalam senarai terpisah ruang untuk menambah baris hiasan pelbagai:

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

Secara lalai, garis atau garis mewarisi warna teks seperti yang ditetapkan oleh sifatnya color. Anda boleh mengubahnya di penyemak imbas yang menyokong text-decoration-colorharta tanah atau harta pendek tiga nilai.

text-decoration sebagai Harta Shorthand

text-decorationboleh digunakan dalam kombinasi dengan text-decoration-styledan text-decoration-colorsebagai harta pendek:

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

Pada masa ini hanya Firefox yang menyokong ini tidak dapat diperbaiki. Safari menyokongnya dengan -webkitawalan. Chrome juga memerlukan -webkitawalan dan ciri platform web eksperimental yang diaktifkan dalam bendera Chrome.

Berkaitan

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

Maklumat lanjut

  • teks-hiasan sebagai sifat ringkas dalam Modul Hiasan Teks CSS spesifikasi W3C Level 3 CR
  • hiasan teks di MDN

Sokongan Penyemak Imbas

Semua penyemak imbas menyokong harta "longhand" CSS2.1 text-decoration. Properti pendek dan sub-sifat text-decoration-color, text-decoration-linedan text-decoration-styledisokong tidak diperbaiki dalam Firefox, dan dengan -webkitawalan di Safari. Chrome juga akan mengenali nilai tersebut dengan -webkitawalan dan bendera Platform Web Eksperimental diaktifkan.

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.

Desktop

Chrome Firefox IE Hujung Safari
91 87 Tidak 88 TP

Mudah Alih / Tablet

Android Chrome Android Firefox Android Safari iOS
88 85 81 14.0-14.4 *

* text-decorationdisokong sepenuhnya, sub-sifat disokong dengan -webkitawalan.
† sub-hartanah juga memerlukan ciri platform web eksperimen yang ditandakan dengan bendera.
‡ CSS2.1 text-decorationsahaja; sub-sifat tidak disokong.