text-strokeegy kísérleti tulajdonság, amely az Adobe Illustrator vagy más vektoros rajzalkalmazásokhoz hasonló szövegdekorációs lehetőségeket kínál. Jelenleg nem szerepel semmilyen W3C vagy WHATWG specifikációban. 2013 júniusától csak -webkitszállítói előtag mögött valósul meg , bár a Firefox és az Internet Explorer jövőbeli verziói támogathatják az ingatlant (valószínűleg saját előtagokkal).
mark ( -webkit-text-stroke: 2px red; )Az text-strokeingatlan valójában két másik ingatlan rövidítése:
text-stroke-width, amely egységértéket (1px, 0,125em, 4in stb.) vesz fel, és leírja a lökethatás vastagságát.text-stroke-color, amely színértéket vesz fel (hex, rgb / rgba, hsl / hsla stb.).
text-stroketárstulajdonsággal is rendelkezik text-fill-color, amely felülírja a colortulajdonságot, lehetővé téve a kecses visszaesést egy másik szövegszínre a nem támogató böngészőkben text-stroke.
Látványosság
- Az által rajzolt
text-strokevonás a szöveg alakjának középpontjához igazodik (ahogy az alapértelmezett az Adobe Illustrator programban), és jelenleg nincs lehetőség az igazítás alakzat belső vagy külső beállítására. Sajnos ez sokkal kevésbé használhatóvá teszi, mivel bármi is legyen a szélütés, a betű formája megzavarja az eredeti típusú tervezők szándékát. A beállítás ideális lenne, de ha egyet kellene választanunk, a külső ütés sokkal hasznosabb lett volna. - a Webkit-ben,
text-strokeCSS Transitions and Animations segítségével animálható - de csak az ecsetvonás színe, a stroke szélessége nem. - Böngészővel kompatibilisebb (és vitathatatlanul robusztusabb) stand-in a
text-strokehatás használatáhoztext-shadow, amelyet ez a CSS-Tricks cikk ismertet.
Böngésző támogatás
| Króm | Szafari | Firefox | Opera | AZAZ | Android | iOS |
|---|---|---|---|---|---|---|
| -webkit- | -webkit- | 21 | 15+ | 10. | Bonyolult | -webkit- |
Megjegyzés a böngésző támogatásáról: A fenti táblázat összefoglalja a böngésző általános támogatását text-stroke- az igazság sokkal bonyolultabb (például az Android a tulajdonságot támogatta a 2.1-2.3 verzióban, majd eltávolította a támogatást a 3.0-ban, mielőtt visszaállította a támogatást a 4.0-ban) . A teljes böngészőtámogatási táblázatért keresse fel a caniuse.com/text-stroke webhelyet.