text-strokeeste o proprietate experimentală care oferă opțiuni de decorare a textului similare cu cele găsite în Adobe Illustrator sau alte aplicații de desenare vectorială. În prezent nu este inclus în nicio specificație W3C sau WHATWG. Începând din iunie 2013, este implementat numai în spatele unui -webkitprefix de furnizor, deși viitoarele versiuni ale Firefox și Internet Explorer pot sprijini proprietatea (probabil sub propriile prefixe).
mark ( -webkit-text-stroke: 2px red; )text-strokeProprietatea este , de fapt prescurtare pentru alte două proprietăți:
text-stroke-width, care ia valoarea unitară (1px, 0,125em, 4in, etc.) și descrie grosimea efectului de cursă.text-stroke-color, care ia o valoare a culorii (hex, rgb / rgba, hsl / hsla, etc.).
text-strokeare, de asemenea, o proprietate însoțitoare text-fill-color, care va suprascrie colorproprietatea, permițând o alternativă grațioasă la o culoare diferită a textului în browserele care nu acceptă text-stroke.
Puncte de interes
- Linia trasată de
text-strokeeste aliniată la centrul formei textului (așa cum este implicit în Adobe Illustrator) și în prezent nu există nicio opțiune pentru a seta alinierea la interiorul sau exteriorul formei. Din păcate, acest lucru îl face mult mai puțin utilizabil, deoarece indiferent de ce acum lovitura interferează cu forma literei, distrugând intenția proiectanților de tip original. Un cadru ar fi ideal, dar dacă ar fi să alegem unul, lovitura exterioară ar fi fost mult mai utilă. - în Webkit,
text-strokeeste animabil cu tranziții și animații CSS - dar numai culoarea liniei, nu lățimii liniei. - Se
text-strokefolosește un suport mai compatibil cu browserul (și, probabil, mai robust) pentru efecttext-shadow, care este prezentat în acest articol CSS-Tricks.
Suport pentru browser
| Crom | Safari | Firefox | Operă | IE | Android | iOS |
|---|---|---|---|---|---|---|
| -webkit- | -webkit- | 21 | 15+ | 10 | Complicat | -webkit- |
O notă despre suportul pentru browser: Tabelul de mai sus este un rezumat al suportului general pentru browser text-stroke- adevărul este mult mai complicat (de exemplu, Android a acceptat proprietatea în versiunile 2.1-2.3, apoi a eliminat suportul în 3.0, înainte de a restabili suportul în 4.0) . Pentru tabelul complet de asistență pentru browser, vizitați caniuse.com/text-stroke.