text-strokeer en eksperimentel egenskab, der giver mulighed for tekstdekoration svarende til dem, der findes i Adobe Illustrator eller andre vektortegningsprogrammer. Det er i øjeblikket ikke inkluderet i nogen W3C- eller WHATWG-specifikation. Fra juni 2013 implementeres det kun bag et -webkitleverandørpræfiks, selvom fremtidige versioner af Firefox og Internet Explorer muligvis understøtter ejendommen (sandsynligvis under deres egne præfikser).
mark ( -webkit-text-stroke: 2px red; )Den text-strokeejendom er faktisk en forkortelse for to andre egenskaber:
text-stroke-width, der tager enhedsværdi (1px, 0,125 em, 4in osv.) og beskriver tykkelsen af slageffekten.text-stroke-color, som tager en farveværdi (hex, rgb / rgba, hsl / hsla osv.).
text-strokehar også en ledsagende egenskab, text-fill-colorsom tilsidesætter coloregenskaben, hvilket giver mulighed for en yndefuld tilbageførsel til en anden tekstfarve i browsere, der ikke understøtter text-stroke.
Interessepunkter
- Det streg, der er tegnet af,
text-strokeer justeret til midten af tekstformen (som standard i Adobe Illustrator), og der er i øjeblikket ingen mulighed for at indstille justeringen til indersiden eller ydersiden af formen. Desværre gør dette det meget mindre anvendeligt, da uanset hvad nu slaget forstyrrer formen på brevet, der ødelægger den oprindelige type designers hensigt. En indstilling ville være ideel, men hvis vi skulle vælge en, ville slag udenfor have været meget mere nyttigt. - i Webkit,
text-strokekan animeres med CSS-overgange og animationer - men kun stregfarven, ikke stregbredden. - En mere browser-kompatibel (og uden tvivl robust) stand-in for
text-strokeeffekten brugertext-shadow, hvilket er beskrevet i denne CSS-Tricks-artikel.
Browsersupport
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| -webkit- | -webkit- | 21 | 15+ | 10 | Kompliceret | -webkit- |
En bemærkning om browsersupport: Tabellen ovenfor er en oversigt over den samlede browsersupport til text-stroke- sandheden er meget mere kompliceret (for eksempel understøttede Android ejendommen i version 2.1-2.3, fjernede derefter support i 3.0, inden support gendannes i 4.0) . Besøg caniuse.com/text-stroke for at få den fulde browser supporttabel.