CSS：渐变文本颜色？

Question

我想让一些文本呈现渐变颜色，但我不知道该怎么做。我希望它能像这样：

只尝试了 -webkit-mask，但我无法按照自己的想法进行操作。另一个方法可能是在 color 属性中使用 -webkit-gradient - 是否可行？

跨浏览器兼容性相当重要，但如果将整个文本变成图像，则比IE中的纯色文本更好（有相当多的文本如此，其中一些是动态的）。

- callumacrae

Answer 1

对于基于 Webkit 的浏览器（Chrome 和 Safari）：

.text {
  font-size: 20px;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#111));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

针对IE浏览器以及其他浏览器：

http://www.webdesignerwall.com/demo/css-gradient-text/

- Ryan McDonough

---

谢谢。你知道其他浏览器也可以实现吗？我希望它能在 WebKit 和 Firefox 上运行（尽管 IE 也非常好）。 - callumacrae

谢谢，已标记为解决方案。我不会使用链接，因为我希望它显示略有不同，而不是剥夺选择文本的能力（尽管我猜我可以在所有这些上面再加一层透明度为0的文本层？） - callumacrae

为什么不使用现代的linear-gradient语法：background-image:-webkit-linear-gradient(#fff, #111);？ - Pavlo