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, який приймає значення кольору (hex, 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-Tricks.
Підтримка браузера
| Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| -вебкіт- | -вебкіт- | 21 | 15+ | 10 | Складний | -вебкіт- |
Примітка щодо підтримки браузера: У наведеній вище таблиці наведено підсумок загальної підтримки браузера text-stroke- правда набагато складніша (наприклад, Android підтримував властивість у версіях 2.1-2.3, потім видалив підтримку в 3.0, перш ніж відновити підтримку в 4.0) . Щоб отримати повну таблицю підтримки браузера, відвідайте caniuse.com/text-stroke.