text-strokeе експериментално свойство, което предоставя опции за декорация на текст, подобни на тези, намерени в Adobe Illustrator или други приложения за векторно рисуване. Понастоящем тя не е включена в нито една спецификация на W3C или WHATWG. От юни 2013 г. той се прилага само зад -webkitпрефикс на доставчик, въпреки че бъдещите версии на Firefox и Internet Explorer може да поддържат свойството (вероятно под техните собствени префикси).
mark ( -webkit-text-stroke: 2px red; )В text-strokeимота е всъщност съкращение за други две свойства:
text-stroke-width, който приема единична стойност (1px, 0,125em, 4in и т.н.) и описва дебелината на ефекта на удара.text-stroke-color, който приема стойност на цвета (шестнадесетичен, rgb / rgba, hsl / hsla и др.).
text-strokeсъщо има придружаващо свойство, text-fill-colorкоето ще замени colorсвойството, позволявайки грациозно връщане към различен цвят на текста в браузъри, които не поддържат text-stroke.
Точки на интерес
- Изчертаният щрих от
text-strokeе подравнен към центъра на текстовата форма (както е по подразбиране в Adobe Illustrator) и в момента няма опция за задаване на подравняването във вътрешността или отвън на фигурата. За съжаление това го прави много по-малко използваем, тъй като без значение какво сега ударът пречи на формата на буквата, унищожавайки първоначалното намерение на дизайнерите. Настройка би била идеална, но ако трябваше да изберем такава, външният удар би бил много по-полезен. - в Webkit
text-strokeе анимационен с CSS преходи и анимации - но само цвета на щриха, а не ширината на штриха. - Използва се по-съвместим с браузър (и може би стабилен) стенд-ин за
text-strokeефектаtext-shadow, който е описан в тази статия за CSS-трикове.
Поддръжка на браузър
| Chrome | Сафари | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| -уебкит- | -уебкит- | 21. | 15+ | 10 | Сложно | -уебкит- |
Бележка за поддръжката на браузъра: Таблицата по-горе е обобщение на цялостната поддръжка на браузъра text-stroke- истината е много по-сложна (например Android поддържаше свойството във версии 2.1-2.3, след което премахна поддръжката в 3.0, преди да възстанови поддръжката в 4.0) . За пълната таблица за поддръжка на браузъра посетете caniuse.com/text-stroke.