text-stroke
on 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 -webkit
müü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-stroke
Vara 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-stroke
on ka kaasomand text-fill-color
, mis alistab color
atribuudi, võimaldades brauserites, mis ei toeta, graatsilist varundust teisele tekstivärvile text-stroke
.
Vaadake seda pliiatsit!
Huvipunktid
- Joonistatud joon
text-stroke
on 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-stroke
on animatable CSS ja -animatsioonide - kuid ainult insult värvi, mitte insult laius. text-stroke
Efekti 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.