CSS 动态文字渐变

Question

我想对一些文本进行渐变，我使用以下代码完成了。问题是，

It works on Chrome,But didn't work on Internet Explorer

另一件事水平

I want it Vertically, More specifically in 45 Angle position, center focused or Circular Gradient

风格Sheet：

<style>
h1 {
   font-size: 60px;
   background: -webkit-linear-gradient(RED, GREEN, BLUE);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

p {
   font-size: 18px;
   background: -webkit-linear-gradient(RED, GREEN, BLUE);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>

标签：

<h1>I Want Gradient</h1>
<p>I want to apply Some Gradient<br/>ON Given Paragraph With<br/>Different angles and<br/>With Different Styles</p>

Result on Chrome:

Result on IE:

请帮助我，谢谢，

Answer 1

这是一个圆形渐变示例：http://jsfiddle.net/swm53ran/74/

<div>
    <h1 class="grad1">I Want Gradient</h1>
    <br/>
    <p class="grad1">I want to apply Some Gradient<br/>ON Given Paragraph With<br/>Different angles and<br/>With Different Styles</p>
</div>

.grad1 {
    display:inline-block;
    background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 to 6.0 */
    background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* For Firefox 3.6 to 15 */
    background: radial-gradient(red 5%, green 15%, blue 60%); /* Standard syntax (must be last) */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Answer 2

这里是45度角渐变：http://jsfiddle.net/swm53ran/75/

.grad1 {
    display:inline-block;
    background: -webkit-linear-gradient(45deg,red,yellow,green);
    background: linear-gradient(45deg,red,yellow,green);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

CSS 动态文字渐变

CSS dynamic Text gradient

css

styles

stylesheet