Как сделать обводку текста в CSS

Для создания обводки текста в CSS, вы можете использовать свойство text-stroke.

p {
  color: white;
  -webkit-text-stroke: 1px black;
  text-stroke: 1px black;
}

В этом примере текст белого цвета с обводкой в 1 пиксель черного цвета. Обратите внимание, что свойство -webkit-text-stroke используется для браузеров, основанных на WebKit (например, Safari), в то время как свойство text-stroke используется для остальных браузеров. Также обратите внимание, что не все браузеры поддерживают это свойство.

Кроме свойства text-stroke, существуют и другие способы создания обводки текста в CSS, например, с помощью свойства text-shadow.

p {
  color: white;
  text-shadow:
    -1px -1px 0 black,
    1px -1px 0 black,
    -1px 1px 0 black,
    1px 1px 0 black;
}

В этом примере текст белого цвета с обводкой из четырех теней черного цвета, сдвинутых на 1 пиксель в разные стороны. Такой способ удобен, если необходимо сделать разноцветную обводку.

Также можно использовать комбинацию свойств “text-stroke” и “text-shadow” для создания более сложной обводки текста.

p {
  color: white;
  -webkit-text-stroke: 1px black;
  text-stroke: 1px black;
  text-shadow:
    -1px -1px 0 black,
    1px -1px 0 black,
    -1px 1px 0 black,
    1px 1px 0 black;
}