如何将两个轮廓添加到CSS中的文字

好吧，我最近为Logos创建了一个简短的CSS代码。我的问题是：添加一个双轮廓。可能吗？如何将两个轮廓添加到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大纲

例子：

来源

2015-10-15 ConnorLx3

您是否尝试过使用其他边框颜色添加伪元素：.green：before？检查这篇文章，https://css-tricks.com/snippets/css/multiple-borders/ –

@small你确实意识到你链接的文章与布局元素有关？ –

这是可能的唯一方法是如果你在CSS中讨论box（div）。

来源

2018-01-22 05:34:42 CelticTree

你所要做的是不可能的，但是，在某些浏览器，有一个新的名为CSS模块CSS形状。然而，它目前仅适用于Chrome，Safari和Opera，其描述过于宽泛，因此在这里得到了答案（主要原因是我不知道如何进行某些研究）。

谷歌的“CSS形状”，你应该找到绰绰有余的创建你想要的指令。

来源

2015-10-16 00:10:50 Rob

我真的不明白形状如何帮助我，除非您建议我围绕我的文本创建自定义CSS形状以采用双轮廓的形式？ – ConnorLx3

@ ConnorLx3是的。 – Rob

如何将两个轮廓添加到CSS中的文字

回答

相关问题