text-strokeer en eksperimentell egenskap som gir tekstdekorasjonsalternativer som ligner på de som finnes i Adobe Illustrator eller andre vektortegningsprogrammer. Den er for øyeblikket ikke inkludert i noen W3C- eller WHATWG-spesifikasjoner. Fra juni 2013 er den bare implementert bak et -webkitleverandørprefiks, selv om fremtidige versjoner av Firefox og Internet Explorer kan støtte eiendommen (sannsynligvis under sine egne prefikser).
mark ( -webkit-text-stroke: 2px red; )Den text-strokeEiendommen er egentlig kort for to andre egenskaper:
text-stroke-width, som tar enhetsverdien (1px, 0.125em, 4in, etcetera) og beskriver tykkelsen på slageffekten.text-stroke-color, som tar en fargeverdi (hex, rgb / rgba, hsl / hsla, etcetera).
text-strokehar også en ledsagende egenskap, text-fill-colorsom vil overstyre coloreiendommen, noe som gir en elegant tilbakemelding til en annen tekstfarge i nettlesere som ikke støtter text-stroke.
Interessepunkt
- Strek tegnet av
text-strokeer justert til midten av tekstformen (som er standard i Adobe Illustrator), og det er for øyeblikket ikke noe alternativ å sette justeringen på innsiden eller utsiden av formen. Dessverre gjør dette det mye mindre brukbart, ettersom uansett hva strekningen forstyrrer formen på brevet, ødelegger den opprinnelige typen designere. En innstilling ville være ideell, men hvis vi måtte velge en, ville slag utenfra vært mye mer nyttig. - i Webkit,
text-strokekan animeres med CSS-overganger og animasjoner - men bare strekfargen, ikke strekbredden. - En mer nettleserkompatibel (og uten tvil robust) stand-in for
text-strokeeffekten brukertext-shadow, som er beskrevet i denne CSS-Tricks-artikkelen.
Nettleserstøtte
| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| -webkit- | -webkit- | 21 | 15+ | 10 | Komplisert | -webkit- |
Et notat om nettleserstøtte: Tabellen ovenfor er et sammendrag av generell nettleserstøtte for text-stroke- sannheten er mye mer komplisert (for eksempel støttet Android eiendommen i versjon 2.1-2.3, og fjernet deretter støtte i 3.0, før du gjenopprettet støtte i 4.0) . For fullstendig nettleserstøttetabell, besøk caniuse.com/text-stroke.