text-strokeadalah harta eksperimental yang menyediakan pilihan hiasan teks yang serupa dengan yang terdapat dalam Adobe Illustrator atau aplikasi lukisan vektor lain. Ia tidak termasuk dalam spesifikasi W3C atau WHATWG. Pada bulan Jun 2013, ini hanya dilaksanakan di belakang -webkitawalan vendor, walaupun versi Firefox dan Internet Explorer yang akan datang mungkin menyokong harta tersebut (kemungkinan di bawah awalan mereka sendiri)
mark ( -webkit-text-stroke: 2px red; )The text-strokeharta sebenarnya singkatan untuk dua hartanah lain:
text-stroke-width, yang mengambil nilai unit (1px, 0.125em, 4in, dll) dan menerangkan ketebalan kesan strok.text-stroke-color, yang mengambil nilai warna (hex, rgb / rgba, hsl / hsla, dll.)
text-strokejuga memiliki properti pendamping text-fill-color, yang akan mengganti colorharta tanah, memungkinkan penggantian warna teks yang berbeza pada penyemak imbas yang tidak menyokongnya text-stroke.
Tempat Menarik
- Strok yang dilukis oleh
text-strokediselaraskan ke tengah bentuk teks (seperti default dalam Adobe Illustrator), dan saat ini tidak ada pilihan untuk mengatur penjajaran ke dalam atau di luar bentuk. Sayangnya ini menjadikannya lebih tidak dapat digunakan, kerana tidak kira apa sekarang gegaran itu mengganggu bentuk huruf yang menghancurkan maksud perancang jenis asli. Pengaturan akan sangat sesuai, tetapi jika kita harus memilihnya, pukulan luar akan lebih berguna. - dalam Webkit,
text-strokeboleh dianimasikan dengan Peralihan dan Animasi CSS - tetapi hanya warna goresan, bukan lebar pukulan. - Penyokong yang lebih serasi dengan penyemak imbas (dan boleh dikatakan kuat) untuk
text-strokekesannya digunakantext-shadow, yang digariskan dalam artikel CSS-Tricks ini.
Sokongan Penyemak Imbas
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| -webkit- | -webkit- | 21 | 15+ | 10 | Rumit | -webkit- |
Catatan mengenai sokongan penyemak imbas: Jadual di atas adalah ringkasan sokongan penyemak imbas keseluruhan untuk text-stroke- kebenarannya jauh lebih rumit (contohnya, Android menyokong harta itu dalam versi 2.1-2.3, kemudian membuang sokongan pada 3.0, sebelum memulihkan sokongan pada 4.0) . Untuk jadual sokongan penyemak imbas lengkap, lawati caniuse.com/text-stroke.