CSS3现在是否可以添加文本渐变？

Question

我希望在文字中添加渐变效果。Net tuts有一篇关于这方面的快速技巧，但它只适用于webkit浏览器。由于这是相当旧的帖子，我想知道是否有任何跨浏览器的解决方案（不考虑ie）。

我知道如何使用背景渐变图像

- Sisir

Answer 1

我所知道的在Firefox中实现这个的唯一方法是通过SVG，但不幸的是这有点笨拙。好的一面是它应该也能在Opera和IE9中工作（未经测试）。如果将doctype声明为XHTML并作为XML提供，则可以在Firefox 3.6中使用（呕）。

<svg height="200" width="500">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1"/>
      <stop offset="100%" style="stop-color:rgb(60,60,60); stop-opacity:1"/>
    </linearGradient>
  </defs>
  <text x="0" y="150" font-family="Arial Black, Arial" font-size="55" fill="url(#gradient)" letter-spacing="-1" class="svg_text">
    NICE GRADIENT
  </text>
</svg>

在 JSFiddle 上查看 http://jsfiddle.net/sHaWW/

- methodofaction