➡️ Итак, один из способов сделать обводку текста: задать тень для него (text-shadow), причем тени задаем с каждой стороны
text-shadow: 1px 0 1px #000,
0 1px 1px #000,
-1px 0 1px #000,
0 -1px 1px #000;
Удобно, если у текста несколько обводок, например:text-shadow:
-2px 0 red,
0 2px violet,
2px 0 red,
0 -2px blue;
❗️Однако, если нужно, чтобы текст при этом был прозрачным, то color: transparent; при наличии text-shadow работать не будет, в этом случае,используйте стили:
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: red;
-webkit-text-fill-color: transparent;
➡️ И бонус: градиентный текст(может поддерживаться не всеми браузерами): color: transparent;
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(to bottom right, darkblue, lightgreen, orange);
🔗 Посмотреть примеры в codepen#css #обводка_текста