text-stroke
yra eksperimentinė ypatybė, suteikianti teksto dekoravimo parinktis, panašias į tas, kurios yra „Adobe Illustrator“ ar kitose vektorinių piešimo programose. Šiuo metu jis nėra įtrauktas į jokias W3C ar WHATWG specifikacijas. Nuo 2013 m. Birželio mėn. Jis diegiamas tik už -webkit
tiekėjo priešdėlio, nors būsimos „Firefox“ ir „Internet Explorer“ versijos gali palaikyti nuosavybę (greičiausiai su savo priešdėliais).
mark ( -webkit-text-stroke: 2px red; )
text-stroke
Nuosavybė yra faktiškai sutrumpinta dviem kitus objektus:
text-stroke-width
, kuri ima vieneto vertę (1px, 0.125em, 4in ir kt.) ir apibūdina smūgio efekto storį.text-stroke-color
, kuris ima spalvos vertę (šešioliktainis, rgb / rgba, hsl / hsla ir kt.).
text-stroke
taip pat turi papildomą ypatybę, text-fill-color
kuri nepaisys color
savybės, todėl naršyklėse, kurios nepalaiko, gali būti grakščiai pakeista kita teksto spalva text-stroke
.
Patikrinkite šį rašiklį!
Lankytinos vietos
- Braižas, kurį
text-stroke
nubrėžė brūkšnys, yra sulygiuotas su teksto formos centru (kaip tai yra numatytoji programoje „Adobe Illustrator“), ir šiuo metu nėra galimybės nustatyti lygiavimą formos viduje ar išorėje. Deja, dėl to jis yra daug mažiau tinkamas naudoti, nes nesvarbu, koks brūkšnelis dabar trukdo raidės formai, naikinančiai originalaus tipo dizainerių ketinimus. Nustatymas būtų idealus, bet jei mes turėtume pasirinkti vieną, išorinis smūgis būtų buvęs daug naudingesnis. - „Webkit“,
text-stroke
yra animacinis naudojant CSS perėjimus ir animacijas, tačiau tik brūkšnio spalva, o ne pločio juosta. - Naudojamas labiau su naršykle suderinamas (ir, be abejo, tvirtas)
text-stroke
efekto budėjimastext-shadow
, kuris aprašytas šiame CSS-Tricks straipsnyje.
Naršyklės palaikymas
„Chrome“ | „Safari“ | „Firefox“ | Opera | T.Y | „Android“ | „iOS“ |
---|---|---|---|---|---|---|
internetinis rinkinys | internetinis rinkinys | 21 | 15+ | 10 | Komplikuota | internetinis rinkinys |
Pastaba apie naršyklės palaikymą: aukščiau pateikta lentelė yra bendro naršyklės palaikymo santrauka text-stroke
- tiesa yra daug sudėtingesnė (pavyzdžiui, „Android“ palaikė nuosavybę 2.1–2.3 versijose, tada pašalino palaikymą 3.0 versijoje, prieš atkurdama palaikymą 4.0 versijoje). . Norėdami rasti visą naršyklės palaikymo lentelę, apsilankykite caniuse.com/text-stroke.