CSS3是可能添加文本梯度吗？ [英] CSS3 is it possible to add text-gradient yet?

问题描述

我正在寻找在文本中添加渐变。网站拥有快速提示

I am looking for adding gradient in text. Net tuts have a quick tips about that. But its only for webkit browsers. As this is quite old post i am checking if there is any cross browser solution for that (disregard ie).

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

推荐答案

我知道在Firefox中工作的唯一方法是通过SVG，不幸的是有点笨拙。好的部分是，应该工作在Opera和IE9（未测试）。

The only way I know to get this working in Firefox is through SVG, which unfortunately is a bit clumsy. The good part is that is should work in Opera and IE9 too (untested). Will work in Firefox 3.6 if the doctype is declared as XHTML and served as XML (ugh).

<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/

Check it out on JSFiddle http://jsfiddle.net/sHaWW/

这篇关于CSS3是可能添加文本梯度吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！