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

Question

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

这是我要实现的文字效果:

如您所见，它有多种颜色(中间为棕色，边缘为白色。)是否有可能完全在 css 和 html 中实现类似的东西(如果是，请指出正确的方向)还是只能通过使用图形来实现？

Answer 1

demo 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's answer from a similar post