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

【问题标题】：-webkit-text-stroke CSS property gives uneven color opacity with overlapping region in Chrome-webkit-text-stroke CSS 属性在 Chrome 中使用重叠区域提供不均匀的颜色不透明度
【发布时间】：2021-03-21 07:55:11
【问题描述】：

我尝试通过“-webkit-text-stroke”在其颜色中添加一些不透明度/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 的解决方案会很好。

【问题讨论】：

这在我看来就像 Chrome 正在这样做正确。 Alpha 值应该是相加的。
另外，这是一个实验属性，不应该在生产中使用 - developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke
@Paulie_D 根据 Alpha 值的 Chrome 附加响应，这可能是正确的，但我希望中风有统一的 alpha。 Firefox 和 Safari 不添加 alpha 值并提供统一的 Alpha 组合。有没有办法在 Chrome 中获得相同的效果。
@Paulie_D 我不会在生产中使用它，因为我使用了 HTML5 Canvas。我只想知道 CSS/HTML 是否可行。
您说“在 Firefox 中它可以正常工作”，但这里没有；笔划向右截断。我不得不在右边附加一个&nbsp; 来解决这个问题。无论如何，Chrome 的解决方法是设置letter-spacing:30px。

标签： html css google-chrome

【解决方案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;

【讨论】：