是否可以通过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

Answer 2

我自己从未对此进行过测试，但我已接近100％确定这会有效。

h1{
    content:'Hello';//this isn't needed but it's your content I'm guessing
    mask-image:linear-gradient(45deg, #FFFFFF 0%, #FFFFFF 20%, #000000 20%, #000000 80%, #FFFFFF 80%, #FFFFFF 100%);//WW3
}

分别使用webkit扩展程序。

Answer 3

您可以使用image和CSS属性background-clip: text来实现类似的东西

http://trentwalton.com/2010/03/24/css3-background-clip-text/

它仍在开发中，仅适用于webkit

你可以将它与css渐变结合起来 http://gradients.glrzad.com/