CSS свойство text-stroke

Свойство text-stroke - это сокращенная форма записи для следующих свойств:

Есть еще свойство text-fill-color, которое переопределяет свойство color, позволяя изменить цвет текста в браузерах, которые не поддерживают свойство text-stroke.

Можно выбрать цвет отсюда: HTML colors.

Свойство text-stroke используется только с вендорным префиксом -webkit-. Это свойство нестандартное. Оно не может быть использовано каждым пользователем. Есть некоторые несовместимости между применениями, и поведение свойства может в дальнейшем измениться.
Значение по умолчанию 0 currentColor
Применяется Ко всем элементам.
Наследуется Да
Анимируемое Да
Версия -
DOM синтаксис object.style.textStroke = "1px #666";

Синтаксис

text-stroke: length | color | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      font-size: 2.5em;
      margin: 0;
      -webkit-text-stroke: 2px #1c87c9;
    </style>
  </head>
  <body>
    <h2>Пример свойства text-stroke</h2>
    <p>Lorem Ipsum - это текст-"рыба"...</p>
  </body>
</html>

Рассмотрим другой пример, где использованы несколько значений свойства text-stroke:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .a {
      font-size: 2.5em;
      margin: 0;
      -webkit-text-stroke: 1px #8ebf42;
      .b {
      font-size: 2.5em;
      margin: 0;
      -webkit-text-stroke: 2pt #8ebf42;
      .c {
      font-size: 2.5em;
      margin: 0;
      -webkit-text-stroke: 0.1cm #8ebf42;
    </style>
  </head>
  <body>
    <h2>Пример свойства text-stroke</h2>
    <p class="a">Lorem Ipsum - это текст-"рыба"...</p>
    <p class="b">Lorem Ipsum - это текст-"рыба"...</p>
    <p class="c">Lorem Ipsum - это текст-"рыба"...</p>
  </body>
</html>

Значения

Значение Описание
length Определяет толщину контура.
color Определяет цвет контура. Могут быть использованы названия цветов, цветовые коды hexadecimal, rgb(), rgba(), hsl(), hsla().
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome edge firefox safari opera
4.0+ -webkit- 15.0+ -webkit- 49.0+ -webkit- 11.0+
3.1 - 10.1 -webkit-
15.0+ -webkit-

Практикуйте свои знания

Какие параметры можно задать для свойства css 'text-stroke'?
Считаете ли это полезным?