是否可以通过css和html实现以下文字效果？

Question

我被卡住了，不知道如何完成以下任务。我在网上搜索，但没有找到类似的。

这是我想要实现的文字效果：

正如您所看到的，它有多种颜色（中间为棕色，边缘为白色。）是否可以完全在 css 和 html 中实现这样的东西（如果是，请指出正确的方向）还是只能通过以下方式实现使用图形？

Answer 1

演示 jsfiddle

这目前似乎只有 webkit 支持（FF/IE 没有text-fill-color属性）

h1{
    font-size:40px;
    font-weight:bold;
    font-family:Helvetica,Arial,sans-serif;
    margin:0;
    padding:0;
    float:left;
    background:-webkit-linear-gradient(-60deg, #ffffff 0%,#ffffff 25%,#000000 25%,#000000 75%,#ffffff 75%,#ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}?

这是基于@Blowsie 在类似帖子中的回答