文本的轮廓笔划

Question

我正在尝试使用CSS将大纲添加到文本中。

问题是阴影不太适合笔划文本。

有什么方法可以用纯css实现这一点吗？

这是我的代码：

.text-stroke {
font-size: 200px;
color: #fff;
text-shadow: -1px -1px #2d4c79, 
1px 1px #2d4c79, 
-2px 2px #2d4c79, 
2px -1px #2d4c79;
}

<div class="text-stroke">Text</div>

Answer 1

您可以使用webkit-text-stroke

.text-stroke {
font-size: 200px;
-webkit-text-stroke: 1px black;
-webkit-text-fill-color: white;
}

<div class="text-stroke">Text</div>