纯 CSS3 文本颜色渐变 - 有可能吗？答案

【问题标题】：Pure CSS3 text color gradient - Is it possible?纯 CSS3 文本颜色渐变 - 有可能吗？
【发布时间】：2011-06-12 00:29:36
【问题描述】：

有没有办法创建跨浏览器的纯 CSS3 文本颜色渐变？

所以，没有png。只有“webkit”。

编辑：更准确地说：它仅适用于 CSS3，适用于文本，而不是框渐变。

编辑：我找到了 this solution，但它仅适用于 webkit。

【问题讨论】：

很简单，可以参考这篇文章：webdesignerwall.com/tutorials/cross-browser-css-gradient
跨哪些浏览器？支持 CSS3 的？
恐怕仅限于盒子渐变。我正在寻找文本渐变。
背景是纯色吗？
Here's an SVG example - 它使用图像而不是 SVG 渐变，但这应该很容易更改。

标签： colors css gradient

【解决方案1】：

目前最好的解决方案是使用纯色作为非 webkit 后备，然后使用以下技术（需要 webkit）：

h1 {
  color: $333;
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

&lt;h1&gt;Example&lt;/h1&gt;

【讨论】：

我已经指出它“需要 webkit”.. 你有更好的解决方案吗？适用于 FF、Chrome 和 Safari .. @user2602584 可怜的用户

【解决方案2】：

正如我已经在 zzzzBov 的回复中作为评论指出的那样，有一种方法可以仅在 CSS3 中实现文本渐变。

如果您将PNG solution 更进一步，您可以使用 css3 渐变做同样的技巧。

当然，这仅适用于具有统一背景颜色的文本。

【讨论】：

【解决方案3】：

在 webkit 之外没有跨浏览器的方法可以做到这一点，因为目前只有 webkit 有一个background-clip: text，而this extension to background-clip 不在标准轨道上（据我所知）。如果您想放宽对 CSS3 的要求，您可以使用 Canvas（或 SVG）实现相同的跨浏览器效果，但您只是在谈论支持 HTML5 的浏览器。

【讨论】：

【解决方案4】：

目前没有“纯粹”的 CSS 方式，但有一种使用 CSS 和一些重复内容的方式。请参阅my server side css gradient text solution here，它不需要 JavaScript 或纯背景。你也可以使用 JavaScript 来做这个客户端，看看 Dragonlabs 做了什么here。

【讨论】：

非常令人印象深刻且直观。感谢您提供此选项。
对不起，双重评论，但我认为快速添加我的解决方案变体可能很有用：jsfiddle.net/P8k58。我使用了一些技巧来使其正常工作，并且出于我的目的，我使用了文本阴影来完成效果。然而，为了创造一个亮点，这可以很容易地只使用 CSS 内容来完成（最好是 IE 8+）。
@JosephMarikle 谢谢。我喜欢你对 :before 和 :after 的使用。