text-strokeon kokeellinen ominaisuus, joka tarjoaa tekstikoristusvaihtoehtoja, jotka ovat samanlaisia kuin Adobe Illustratorissa tai muissa vektoripiirrosovelluksissa. Sitä ei tällä hetkellä sisälly mihinkään W3C- tai WHATWG-määritykseen. Kesäkuusta 2013 lähtien se on toteutettu vain -webkittoimittajan etuliitteen takana , vaikka tulevat Firefoxin ja Internet Explorerin versiot saattavat tukea omaisuutta (todennäköisesti omilla etuliitteillä).
mark ( -webkit-text-stroke: 2px red; )text-strokeOmaisuus on todella vain lyhenne kaksi muuta ominaisuudet:
text-stroke-width, joka ottaa yksikköarvon (1px, 0,125em, 4in jne.) ja kuvaa iskun vaikutuksen paksuuden.text-stroke-color, joka ottaa väriarvon (hex, rgb / rgba, hsl / hsla jne.).
text-strokeon myös kumppaniominaisuus text-fill-color, joka ohittaa colorominaisuuden, mikä sallii sulavan varauksen eri tekstiväreihin selaimissa, jotka eivät tue text-stroke.
Kiinnostavat paikat
- Piirtämä viiva
text-strokeon kohdistettu tekstimuodon keskikohtaan (kuten Adobe Illustratorin oletusarvo on), eikä tällä hetkellä ole vaihtoehtoa asettaa kohdistusta muodon sisä- tai ulkopuolelle. Valitettavasti tämä tekee siitä paljon vähemmän käyttökelpoisen, sillä riippumatta siitä, mitä aivohalvaus nyt häiritsee, kirjeen muoto tuhoaa alkuperäisen suunnittelijan aikomuksen. Asetus olisi ihanteellinen, mutta jos meidän olisi pitänyt valita yksi, ulkopuolinen aivohalvaus olisi ollut paljon hyödyllisempi. - WebKitissä,
text-strokeon animatable CSS Siirtymiset ja animaatioita - mutta vain aivohalvaus väri, ei viivan leveyttä. - Selaimen kanssa yhteensopivampi (ja epäilemättä vankka)
text-strokevaikutusta käyttävä stand-in on käytössätext-shadow, mikä on kuvattu tässä CSS-Tricks-artikkelissa.
Selaimen tuki
| Kromi | Safari | Firefox | Ooppera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| -verkkosarja | -verkkosarja | 21 | 15+ | 10 | Monimutkainen | -verkkosarja |
Huomautus selaintuesta: Yllä oleva taulukko on yhteenveto selaimen yleisestä tuesta text-stroke- totuus on paljon monimutkaisempi (esimerkiksi Android tuki omaisuutta versioissa 2.1-2.3, poisti sitten tuen versiossa 3.0, ennen kuin palautti tuen versiossa 4.0). . Selaimen koko tukitaulukko on osoitteessa caniuse.com/text-stroke.