-webkit-text-stroke CSS属性在Chrome中提供不均匀的颜色不透明度和重叠区域

Question

我尝试用＃34; -webkit-text-stroke＆＃34;来设置一个不透明度/ alpha颜色的笔划。

对于重叠和非重叠的中风区域，我的颜色不透明度不均匀。

以下是示例代码行。

<div style="font-size:300px;-webkit-text-stroke:60px rgba(255,0,0,0.5);">Ho</div>

输出：

在输出中，重叠区域比非重叠区域更暗。 我不明白为什么会如此，以及如何在笔划文本中获得统一的不透明度。

此外，此问题仅适用于Chrome，对于Mozilla Firefox和Safari，它可以正常使用。 我们可以在Canvas中绘制它或在字符之间提供间距以避免重叠。但是在CSS / HTML中有一个解决方案会很好。

Answer 1

您可以使用带有 alpha 值的渐变作为文本笔触，然后 alpha 不会相加：

background: -webkit-linear-gradient(top, rgba(10, 14, 15, 0.3), rgba(10, 14, 15, 0.3));
    -webkit-background-clip: text;
    -webkit-text-stroke: 1vw transparent;