使用 CSS3 在文本上创建双色锐渐变

我需要为我正在构建的网站上的标题和导航文本创建“锐利”渐变。我正在尝试使其尽可能纯 HTML5/CSS3，并且愿意坚持使用@font-face而不是转移到Cufon。我所说的锐渐变是指两种颜色，两者之间没有混合。

例子：http://dl.dropbox.com/u/12147973/sharp-gradient.png http://dl.dropbox.com/u/12147973/sharp-gradient.png

我在 Cufon 找到了一种方法，但正如我所说，我想坚持@font-face。 Cufon 在 IE 中给了我太多的悲伤，我真的很喜欢@font-face works.

我还找到了一种使用 CSS3 对文本进行渐变的方法，但我不知道如何使用“锐利”渐变来做到这一点。http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-pure-css-text-gradients/ http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-pure-css-text-gradients/

正如您从我的示例中看到的，使用 PNG 图像技巧不起作用，因为它不在纯色背景上。如果一切都失败了，我只会使用平滑渐变，但我信任 StackOverflow 的优秀人员。

我目前正在使用的渐变：

-webkit-gradient(linear, left top, left bottom, color-stop(0%,#a8a8a8), color-stop(50%,#a8a8a8), color-stop(50%,#6d6d6d), color-stop(100%,#6d6d6d))

注意：我不介意它是否只是一个浏览器解决方案。如果这就是他们的全部，那么至少比什么都没有好。

我相信您需要使用色标。在这种情况下，您需要将渐变中的颜色停在确切的位置。

看看 Nettuts 上的演示，我获取了代码并对其进行了修改，以使用以下代码创建双色调锐渐变：

    -webkit-mask-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.5, rgba(15,8,188,1)),
color-stop(0.5, rgba(70,62,255,0.5)));

将演示中的“-webkit-mask-image”部分替换为我上面的内容，它应该就是您正在寻找的内容。调整 RGB 值以获得您喜欢的颜色。请注意，尽管在演示中，CSS 中的一些其他内容可能会产生意外结果，例如“h1 a”选择器中的颜色属性和“h1:after”选择器中的颜色和文本阴影属性。您可能需要删除这些内容，以便更好地了解最纯粹的效果。

另请注意，上述代码仅适用于基于 webkit 的浏览器（例如 Chrome 和 Safari）。您需要为其他浏览器实现适当的浏览器前缀属性（例如 -moz-），但在此之前请确保浏览器支持“mask-image”和“gradient”属性。

干杯! :)