2

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

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

在此处输入图像描述

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

4

3 回答 3

5

演示 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 在类似帖子中的回答

于 2012-12-22T17:09:54.643 回答
1

我自己从来没有测试过这个，但我几乎 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扩展。

于 2012-12-22T16:46:31.137 回答
1

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

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

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

您可以将它与 css 渐变结合在一起
http://gradients.glrzad.com/

于 2012-12-22T16:49:39.413 回答