如何在CSS中为文本添加两个轮廓

Question

好吧，我最近为Logos创建了一个简短的CSS代码。我的问题是：添加双重轮廓。有可能吗？

这是我目前的CSS：

.green {
  background: -webkit-linear-gradient(#8CE06E, #61964E); /* Gradient colors: Top to Bottom */
  -webkit-text-stroke: 1px 61964E /* Outline weight and color */
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent;
  font-size: 43px;
  font-family: Luckiest Guy;
  text-align: center;
}

如您所见，有一个大纲（第2行）：

-webkit-text-stroke: 1px 61964E /* Outline weight and color */

我想知道我是否可以添加两个轮廓。第一个是白色，第二个是绿色（因为主要文本是绿色）。所以，它是文本 - 大纲1 - 大纲2

示例：

Answer 1

唯一可行的方法是，如果你在谈论CSS中的box（div）。

Answer 2

您尝试做的是不可能的，但在某些浏览器中，有一个名为CSS形状的新CSS模块。但是，它目前仅适用于Chrome，Safari和Opera，其描述范围太广，不能作为答案（主要是因为如果没有一些研究，我不知道如何）。

谷歌的“CSS形状”，你应该找到足够的指导来创建你想要的东西。