Javascript 模拟外部笔划：：在伪元素之前：透明文本问题

我发现很难相信，没有标准和简单（和浏览器无关）的方法来使用CSS在文本外部添加笔划效果

我们确实有

-webkit文本笔划

，但出于某种奇怪的原因，笔划是围绕文本的边框而不是在其外部，如图所示

因此，我尝试实现一个基于的解决方案，它将带笔划的文本放置在原始未带笔划文本后面的伪元素中。我已经用以下代码在中演示了这一点：

var jqueryatr=函数（选择器、属性、设置函数）{
document.querySelectorAll（选择器）.forEach（（el，i）=>{
setAttribute（attr，setterFunction.call（el，i，attr））；
});
};
jqueryatr（'.myclass'，data myclass'，函数（索引，属性）{
返回this.innerHTML；
});
正文{
背景：无；
}
.基本的{
颜色：rgba（18621885,1）；
字体：2.5em格鲁吉亚，衬线；
}
.myclass{
位置：相对位置；
背景：透明；
z指数：0；
}
.myclass:：之前{
内容：attr（数据myclass）；
位置：绝对位置；
-webkit文本笔划：0.2米rgba（0,0,0,1）；
z指数：-1；
}
.另一类{
-webkit文本笔划：0.2米rgba（0,0,0,1）；
}
无任何笔划的文本

带有外部笔划的文本

< p类=“另一类基本”>没有技巧应用
<代码> < p>这里有一个想法，你可以考虑<代码>混合混合模式< /> >和文本阴影的组合来近似这个。棘手的部分是调整阴影，以防需要更大的笔划：


.text>span{
字体系列：无衬线；
字体大小：60px；
字体大小：粗体；
颜色：#fff；/*使用白色*/
/*围绕文本创建笔划*/
文本阴影：
2×0×0×000，
0 2px 0px#000，
2px 2px 0px#000，
-2×0×0×000，
0-2px0px#000，
-2px-2px 0px#000，
-2px 2px 0px#000，
2px-2px 0px#000；
混合混合模式：变暗；/*所有颜色都比白色更暗，因此我们始终可以看到背景*/
}
.文本{
显示：内联块；
填充：20px；
背景：线性渐变（向右、红色、蓝色）；
}
此处的一些文本
CSS属性可以实现以下功能：


.stroke{
-webkit文本笔划：0.2米rgba（0,0,0,1）；
绘制顺序：笔划填充；
}
.基本的{
颜色：rgba（18621885,1）；
字体：2.5em格鲁吉亚，衬线；
}
无笔划的文本

带有笔划的文本
最简单、浏览器支持最好的可能是SVG。

您可以设置与之前使用：：时大致相同的内容，不同之处在于背景笔划版本可以有一个遮罩，只允许外线可见。

从那里，您可以简单地在上面附加相同文本的副本，并且您可以根据需要在笔划和填充上应用不透明度：


正文{
背景图片：url(https://picsum.photos/800/200?image=1051);
字体系列：无衬线；
}
svg{
字体大小：40px；
字体大小：粗体；
}
.文本笔划{
笔画：黑色；
笔画宽度：12px；
笔划线条连接：圆形；
}
.visibleText{
填充：rgba（18621885,1）；
过渡：填充不透明度。5s线性；
}
.visibleText:悬停{
填充不透明度：0；
}

带提纲的文本
使用SVG过滤器的解决方案
要获得文本周围的笔划，可以使用组合SVG过滤器，该过滤器由依次应用的过滤器组成：
feMorphology
、
feComposite
和
feColorMatrix


正文{
背景图片：url(https://picsum.photos/800/800?image=1061);
背景尺寸：封面；
字体系列：衬线；
}

带提纲的文本
在您的方法中，如果我们确实想要文本的特定颜色（不是完全透明的），例如
rgba（18621885，0.5）
，那么您是否建议按照我的帖子使用
：：before
技巧，以便将彩色文本（无笔划）放在顶部，背景（笔划）放在下面？此外，我以前也尝试过多阴影解决方法（使用4或8个以上的阴影…以获得平滑效果），但我拒绝使用它的部分原因是因为我需要控制笔划的不透明度。。。重叠阴影很难实现，不透明度往往会累积到
1.0
@drmrbrewer是的，正确，这是在这种情况下使用阴影的缺点。不易控制且难以添加不透明度。。对于您的文本颜色，是的，我将使用一个伪元素，文本在透明父级上方（或下方）具有一些不透明度。。。顺便说一句，我会尝试编辑我的答案，以防我发现了一个不透明的窍门，如果没有背景会发生什么？@drmrbrewer你会得到白色的。。混合考虑两种颜色。使用白色和深色的诀窍是，在所有情况下，我们都会选择背景，因为它是最暗的（所有东西都比白色更暗）。。。如果没有背景，白色将变为白色picked@Kaiido不，我应该添加显示：内联块，算了吧。。包装是必要的，应该可以正常工作，但内联元素上的伪元素并不好。（编辑）你能分享一下结果的截图吗，这样我们就可以看到它的样子了？支持率似乎很低（好消息：浏览者的支持率似乎在上升。）同意，我确信SVG会很容易解决这个问题。太糟糕了，我们不能对笔划应用不透明度，因为有重叠（OP也希望在我的回答中这样评论）是的，但它会导致颜色不均匀，因为相邻字母的笔划之间会有重叠。@Temaniaf哦，我现在看到了，在Chrome上。。。呆子。在FF上效果很好，我会检查那里发生了什么，但是设置
不透明度
在任何地方都有效：啊，Chrome和Fiferox之间再次发生了冲突。。是的，忘了这里的不透明度吧。我试着用r