Обводка текста CSS: создание эффекта контурного текста
Обводка текста CSS основана на свойстве -webkit-text-stroke, которое принимает в качестве значений ширину и цвет:
.outline {
-webkit-text-stroke: 2px cyan;
}
Значение width указывает, какой толщины будет контур. Значение color определяет цвет контура. Все довольно просто. Пример применения этого свойства:
.outline {
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: cyan;
}
Следует отметить, что у свойства text-stroke есть префикс webkit. Это может показаться странным, но это единственная версия, поддерживаемая всеми браузерами. Даже браузеры, не использующие webkit, такие как Firefox и Edge, поддерживают это свойство.
Размещаем все вместе
Мы рассмотрели свойство -webkit-text-stroke и его использование. Теперь проиллюстрируем все это.
Перед тем, как сделать обводку текста CSS, создайте новый документ HTML и добавьте в него следующую разметку:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Text Outline</title>
<style>
body {
background-color: #0F1020;
padding: 100px;
}
#textContainer p {
font-family: sans-serif;
font-size: 64px;
fong-weight: 100;
color: #E6E8E6;
margin: 0;
}
</style>
</head>
<body>
<div id="textContainer">
<p>Did you know that your
fingerprint is unique?
<span class="outline">Of course you did!</span></p>
</div>
</body>
</html>
Сохраните веб-страницу, а затем откройте ее в браузере. Вы должны увидеть примерно следующее:

Взгляните на разметку, отвечающую за CSS обводку текста белым цветом, который мы видим:
<div id="textContainer">
<p>Did you know that your
fingerprint is unique?
<span class="outline">Of course you did!</span></p>
</div>
Мы хотим разместить текст внутри элемента span и отобразить его с эффекта контура, о котором говорили ранее. Обводка должна быть шириной 1 пиксель и иметь зеленовато-лимонный цвет. Для этого добавьте следующий код в нижнюю часть блока style (ниже существующих правил стиля):
#textContainer .outline {
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #AFFC41;
}
После этого сохраните веб-страницу и откройте (обновите) ее в браузере. Вы должны увидеть появившийся контур:

Если хотите отобразить только контур текста, все, что нужно сделать, это присвоить CSS свойству color значение transparent:
#textContainer .outline {
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #AFFC41;
color: transparent;
}
После этого текст «Of course you did!» будет отображен только с помощью контура!
Работа со старыми браузерами
Свойство text-stroke поддерживается браузерами хорошо. Но, возможно, вы захотите отобразить альтернативный вариант для тех пользователей, которые используют старые версии браузеров. В этих случаях нужно «закрасить» текст сплошным цветом. Это можно сделать, комбинируя свойства color и -webkit-fill-color:
#textContainer .outline {
color: #E6E8E6;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #AFFC41;
}
В этом случае текст будет отображаться сплошным цветом для старых свойств (с помощью свойства color). Если поддерживаются свойства -webkit-text, то webkit-text-fill-color переопределит свойство цвета и отобразит контур с прозрачным цветом заливки.
Заключение
Свойство -webkit-text-stroke упрощает создание обводки текста CSS. Раньше, если бы мы хотели сделать это, пришлось бы полагаться на изображения, хитрости с тенями, использование специального контурного шрифта. Теперь нам не нужно все это делать!