使用css混合在一起的圆形文本笔划/轮廓

实现类似于此的文本笔划的最佳方法是什么？

我尝试过的东西，但效果不好，或者有圆形的边缘，并混合在一起

h1{
-webkit转换：translate3d（-50%，-50%，0）；
转换：translate3d（-50%，-50%，0）；
字体大小：14vw；
宽度：90%；
位置：绝对位置；
z指数：0；
左：55%；
最高：50%；
颜色：#c35037；
}
h1：之前{
内容：attr（title）；
位置：绝对位置；
-webkit文本笔划：0.18em#000；
左：0；
排名：0；
z指数：-1；
}
h1：之后{
左：0；
排名：0；
位置：绝对位置；
内容：attr（title）；
z指数：1；
背景：-webkit渐变（线性，左上，右下，从（rgba（255,0,0,0）），到（rgba（255,0,0,0.12））；
背景：线性梯度（左上角，rgba（255,0,0,0）0%，rgba（255,0,0,0.12）100%）；
-webkit背景剪辑：文本；
背景剪辑：文本；
颜色：透明；
文本阴影：-0.02em-0.04em 1px rgba（255,0,0,0.1）；
}

---

与每个人一起

为此，您需要SVG过滤器

因此，首先使用svg标记创建一个svg过滤器，如下所示：

使用数据属性，我们将设置相同的文本并使用

attr（）

访问它，然后在

：before

元素中设置它，并将过滤器应用于before元素，如下所示：

标题

div.text:之前{
内容：attr（数据文本）；
过滤器：url（#粘性）；
}

您还需要调整字母间距、标题和before元素的位置来调整文本

主要的魔力在于

，要了解更多有关它的信息，请阅读本文：

值500和-5将使效果成为可能。500乘以alpha通道，然后从该值中减去

-5*255

代码如下：

正文{
显示：网格；
放置项目：中心；
高度：100vh；
保证金：0；
背景#fae0d9；
}
div.text{
/*字体系列：无衬线*/
字体大小：5rem；
位置：相对位置；
颜色：#c35037；
}
div>span{
位置：相对位置；
字母间距：7px；
左：2px；
}
div.text:之前{
颜色：#fff；
内容：attr（数据文本）；
位置：绝对位置；
字体大小：5.5rem；
过滤器：url（#粘性）；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
字母间距：3.5px；
}
svg{
位置：绝对位置；
指针事件：无；
底部：0；
}

标题

如果没有SVG（我不知道该用什么），CSS的帮助大约是一半。你可以复制或复制。但我不会在这里工作

阴影演示/放置阴影和失败的文本笔划：所有这些都提供平均渲染

h1、h2、h3{
边距：0；边框：实心1px；
颜色：#C35037；
填充：0.5em；
文本对齐：居中；
字体大小：100px；
背景：#FAE0DA；
}h1{
文本阴影：0.0.2米白色、0.0.2米白色、0.0.2米白色、0.0.2米白色、0.0.2米白色、0.0.2米白色、0.0.2米白色、0.0.2米白色、0.0.2米白色、0.0.2米白色、0.0.2米白色、0.0米白色、0.3米白色、0.4米白色；
}
h2 span{过滤器：
投影（0.015em白色）
投影（0.015em白色）
投影（0.015em白色）
投影（0.015em白色）
投影（0.015em白色）
阴影（0-0.015 em白色）
阴影（0-0.015 em白色）
阴影（0-0.015 em白色）
阴影（0-0.015 em白色）
阴影（0-0.015 em白色）
投影（-0.015em 0白色）
投影（-0.015em 0白色）
投影（-0.015em 0白色）
投影（-0.015em 0白色）
投影（-0.015em 0白色）
投阴影（0.015em 0白色）
投阴影（0.015em 0白色）
投阴影（0.015em 0白色）
投阴影（0.015em 0白色）
投阴影（0.015em 0白色）
}
h3{-webkit文本笔划：0.05em白色；}

与大家分享
和大家
与大家一起

这太棒了，谢谢！h1选项/文本阴影几乎就是我想要的。文字阴影是否可能是实心的，而不是模糊的边缘？或者h2选项使用阴影，但边缘为圆形？@drifterOcean19要增加边缘的清晰度，您需要添加更多阴影，每次有新阴影层时，半透明部分将变得越来越不透明。就这样：）