text-stroke
är en experimentell egenskap som ger textdekorationsalternativ som liknar dem som finns i Adobe Illustrator eller andra vektorritningsapplikationer. Det ingår för närvarande inte i någon W3C- eller WHATWG-specifikation. Från och med juni 2013 implementeras den bara bakom ett -webkit
leverantörsprefix, även om framtida versioner av Firefox och Internet Explorer kan stödja fastigheten (troligtvis under sina egna prefix).
mark ( -webkit-text-stroke: 2px red; )
Den text-stroke
egenskapen är egentligen en förkortning för två andra egenskaper:
text-stroke-width
, som tar enhetsvärdet (1px, 0.125em, 4in, etcetera) och beskriver tjockleken på slageffekten.text-stroke-color
, som tar ett färgvärde (hex, rgb / rgba, hsl / hsla, etcetera).
text-stroke
har också en åtföljande egenskap, text-fill-color
som kommer att åsidosätta color
egenskapen, vilket möjliggör en graciös återgång till en annan textfärg i webbläsare som inte stöder text-stroke
.
Kolla in den här pennan!
Intressanta platser
- Det drag som ritas av
text-stroke
är inriktat mot mitten av textformen (som är standard i Adobe Illustrator), och det finns för närvarande inget alternativ att ställa in justeringen på insidan eller utsidan av formen. Tyvärr gör detta det mycket mindre användbart, eftersom oavsett vad stryket nu påverkar formen på bokstaven som förstör den ursprungliga typen av formgivare. En inställning skulle vara perfekt, men om vi var tvungna att välja en, skulle slaglängden ha varit mycket mer användbar. - i Webkit, kan
text-stroke
animeras med CSS-övergångar och animationer - men bara strokefärgen, inte strokebredden. - En mer webbläsarkompatibel (och utan tvekan robust) stand-in för
text-stroke
effekten användertext-shadow
, vilket beskrivs i denna CSS-Tricks-artikel.
Webbläsarstöd
Krom | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
-webkit- | -webkit- | 21 | 15+ | 10 | Komplicerad | -webkit- |
En anmärkning om webbläsarstöd: Tabellen ovan är en sammanfattning av det totala webbläsarstödet för text-stroke
- sanningen är mycket mer komplicerad (till exempel stödde Android egenskapen i version 2.1-2.3 och tog sedan bort stöd i 3.0, innan stödet återställdes i 4.0) . För fullständig webbläsarsupporttabell, besök caniuse.com/text-stroke.