text-strokeon eksperimentaalne atribuut, mis pakub teksti kaunistamise valikuid, mis on sarnased Adobe Illustratori või muude vektorjoonistamisrakendustega. Praegu pole seda üheski W3C ega WHATWG spetsifikatsioonis. Alates 2013. aasta juunist on see rakendatud ainult -webkitmüüja eesliite taga , kuigi Firefoxi ja Internet Exploreri tulevased versioonid võivad seda omadust toetada (tõenäoliselt nende endi eesliidete all).
mark ( -webkit-text-stroke: 2px red; )text-strokeVara tegelikult lühendvormina kaks omadused:
text-stroke-width, mis võtab ühiku väärtuse (1px, 0.125em, 4in jne) ja kirjeldab löögiefekti paksust.text-stroke-color, mis võtab värvi väärtuse (hex, rgb / rgba, hsl / hsla jne).
text-strokeon ka kaasomand text-fill-color, mis alistab coloratribuudi, võimaldades brauserites, mis ei toeta, graatsilist varundust teisele tekstivärvile text-stroke.
Huvipunktid
- Joonistatud joon
text-strokeon joondatud tekstikuju keskele (nagu on Adobe Illustratoris vaikimisi) ja praegu pole võimalust seada joondus kuju sise- või välisküljele. Kahjuks muudab see selle märksa vähem kasutatavaks, sest ükskõik, mis see tõmme nüüd häirib, on tähekujuline kuju, mis hävitab algset tüüpi disainerite kavatsuse. Seade oleks ideaalne, kuid kui me peaksime selle valima, oleks väline löök olnud palju kasulikum. - WebKitis,
text-strokeon animatable CSS ja -animatsioonide - kuid ainult insult värvi, mitte insult laius. text-strokeEfekti jaoks kasutatakse brauseriga ühilduvamat (ja vaieldamatult jõulisemat) stand-initext-shadow, mis on välja toodud selles CSS-trikkide artiklis.
Brauseri tugi
| Chrome | Safari | Firefox | Ooper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| -veebikomplekt | -veebikomplekt | 21 | 15+ | 10 | Keeruline | -veebikomplekt |
Märkus brauseri toe kohta: ülaltoodud tabel on kokkuvõte brauseri üldisest toest text-stroke- tõde on palju keerulisem (näiteks Android toetas atribuuti versioonides 2.1–2.3, eemaldas seejärel toe versioonis 3.0, enne kui taastas toe versioonis 4.0). . Brauseri täieliku tugitabeli leiate saidilt caniuse.com/text-stroke.